[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法
Post on:2010年9月3日
sponsors
submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。
Styling Submit Buttons for Mobile Safari
デモページ
キャプチャの元画像：協力（@sparrowSeven）
この現象はデスクトップ用のブラウザ（Safari, Firefox）では起きませんでした。また、iPhoneのシミュレーター（iBBDemo2）でも確認できませんでした。iPhone4固有の現象のようです。
原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。
未対応時のスタイル
HTML
HTMLは非常にシンプルです。
|
1 2 3 |
<textarea> <input type="submit" value="test 1" /> </textarea> |
CSS
未対応時のスタイルシートです。
|
1 2 3 4 5 6 7 8 9 10 11 |
input[type="submit"] { background: #FF663C; width: 150px; padding: 9px; letter-spacing: 1px; border: none; color: #EFDDA8; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } |
対応時のスタイル
テキストのずれや角丸を期待通りにするには「-webkit-appearance: none;」を追加します。HTMLの変更はありません。
CSS
対応時のスタイルシートです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
input[type="submit"].fixed { background: #00429E; width: 150px; padding: 9px; letter-spacing: 1px; border: none; color: #EFDDA8; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-appearance: none; } |
-webkit-appearanceの参考ページ
ブラウザでの表示
ブラウザでの表示は、未対応・対応時ともに変化はありません。
iPhone4での検証にあたって
僕はiPhone4を持ってないため、coliss.comのtwitterアカウントで協力を求めました。
挙手いただいた方をはじめ、検証していただいた方、ありがとうございました。
thx: @sparrowSeven, @tobotoboto, @enst_jp
sponsors
