[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法

サイト構築 -CSS

submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。

Styling Submit Buttons for Mobile Safari
デモページ
 キャプチャの元画像：協力（@sparrowSeven）

この現象はデスクトップ用のブラウザ（Safari, Firefox）では起きませんでした。また、iPhoneのシミュレーター（iBBDemo2）でも確認できませんでした。iPhone4固有の現象のようです。

原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。

未対応時のスタイル

HTML

HTMLは非常にシンプルです。

<input type="submit" value="test 1" />

CSS

未対応時のスタイルシートです。

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

対応時のスタイルシートです。

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;
}