<H2>iPhone(Safari)標準の長円ボタンを小角丸に</H2>
  <FORM>
    <P>長円ボタン　無指定(標準)</P>
    <input type="button" value="入る">
    <P>小角丸ボタン　スタイルなし指定</P>>
    <input type="button" class="square"value="入る">
    </FORM>
  

input.square {
  -webkit-appearance: none;
}

  <H2>ボタンの幅・高さ、角丸、グラデーション、シャドウ</H2>
  <FORM>
    <P>幅、高さ、文字配置中心</P>

    <input type="button" value="入る" class="base">
    <P>角丸=10px</P>
    <input type="button" value="入る" class="base cornerR">
    <P>グラデーション</P>
    <input type="button" value="入る" class="base cornerR gradation">
    <P>文字影、枠</P>
    <input type="button" value="入る" class="base cornerR gradation shade">
    </FORM>

.base {
        width:200px;
    height:40px;>
    text-align:center;
}
.cornerR {
  -webkit-appearance: none;       /* without this this style doens't work. */

  border-radious: 10px;           /* CSS3*/
  -moz-border-radious: 10px;      /* Firefox */
  -webkit-border-radius: 10px;    /* Safari,Chrome */
}
.gradation {
  background: -webkit-gradient(linear, left top, left bottom, from(#060), to(#090));
  color: #FFF;
}
.shade {
  text-shadow: 1px 2px 3px #666;
  border: 3px #690 solid       /* Waku */
}

<form method="post" action="example.cgi">
<h4>チェックボックス</h4>
<p style="padding-left : 10px;"> チェックボックスのみクリック可(標準)<br>
<input type="checkbox" name="q1" value="チェック1"> チェック1
<input type="checkbox" name="q1" value="チェック2"> チェック2
<input type="checkbox" name="q1" value="チェック3"> チェック3
</p>

<div class="larger">
チェックボックス領域全体をクリックできるように<br/>
<label onclick=""><input type="checkbox" name="q1" value="チェック4"> チェック1</label>
<label onclick=""><input type="checkbox" name="q1" value="チェック5"> チェック2</label>
<label onclick=""><input type="checkbox" name="q1" value="チェック6"> チェック3</label>
</div>

<h4>ラジオボタン</h4>
<p style="padding-left : 10px;"> ラジオボタンのみクリック可(標準)<br>
<input type="radio" name="q2" value="はい"> はい
<input type="radio" name="q2" value="いいえ"> いいえ
<input type="radio" name="q2" value="どちらでもない"> どちらでもない
</p>
<div class="larger">
ラジオボタン領域全体をクリックできるように<br/>
	<label onclick=""><input type="radio" name="q3" value="はい"> はい</label>
	<label onclick=""><input type="radio" name="q3" value="いいえ"> いいえ</label>
	<label onclick=""><input type="radio" name="q3" value="どちらでもない"> どちらでもない</label>
</div>

<p><input type="submit" value="送信する"></p>

</form>

補足説明：
通常はチェックボックスやラジオボタンとその文字列を<label>〜</label>で囲ってやれば、文字列をタップするとチェックが可能となるが、iOSの場合はこれが動作せず、クリック時空のイベントを呼び出すことで、無効だった、文字列のタップによるチェックが可能になる。

body {
	margin: 0;
}

.larger {
	padding: 10px 0 10px 10px;
}

.larger input[type="checkbox"] {
	margin: 5px 10px 5px 4px;
	-webkit-transform: scale(1.7);
}

.larger input[type="radio"] {
	margin: 5px 10px 5px 4px;
	-webkit-transform: scale(1.7);
}

補足説明：
通常のチェックボックス、ラジオボタンはスマートフォンでは表示が小さく、操作しにくい。そこでCSSでサイズを変更するがwidthとheightの指定はPCやAndroidでは無効なので、transformで指定する。