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

サイト構築 -CSS

Post on:2010年9月3日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

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

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

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

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

未対応時のスタイル

HTML

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

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

</textarea>

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

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