Mobile Safari form部品の覚え書き

すごく小さな事ですが、iPhoneやiPadなど、Mobile Safari特有の問題の解決策。
※キャプチャは後ほどアップします。

input type="radio"（ラジオボタン）にCSSでwidthとheightを指定したら、四角っぽいカタチになってしまう

たとえば、こんなCSSになっていると、

input[type="checkbox"] {
width: 22px;
height: 22px;
}

こうなります。

そこで、「-moz-border-radius」「-webkit-border-radius」プロパティを追加します。値はwidth等の半分。（※2011-02-23訂正）

input[type="checkbox"] {
width: 22px;
height: 22px;
-webkit-border-radius: 11px;
}

これで円になります。

文字列をクリックしたら、フォーム部品が反応するようにしたい

「label要素をクリックしたら、for属性と同じ値のinput要素をクリックしたのと同じ動作になる」ってのを、
Mobile Safariで実現したい場合。
javascriptで実装します。

<input type="radio" id="radio1a" name="radio1" value="1" />
<label onclick="document.getElementById('radio1a').checked=!document.getElementById('radio1a').checked">ラベル文字列</label>

jQueryで一括設定 ※HTMLでinputとlabelが隣接している場合

$("label").each(function(){
    $(this).click(function(){
        $(this).prev().attr("checked", !$(this).prev().attr("checked"));
     });
});