Close

Web技術Tips

Homepage Tips Homepage Tips

ホームWeb技術TipsiPhoneでinput要素のCSSが適用されていなかった

SHARE

SHARE

CSS3 2015.06.30(公開)

iPhoneでinput要素のCSSが適用されていなかった

フォームを作っていた際に、実機のiPhone5でデザインをチェックしたらボタンのデザインがおかしくなっていました。(chromeのデベロッパーツールでは正常に表示されます。)

正しい表示

ios-img01

iPhoneでの変な表示

ios-img02

角丸がおかしいし、背景もなぜかグラデーションがかかっています。

文字の太さも変わっていますね。

対処法

検索で同じような症状を調べたところ、どうやら原因はiPhoneのsafari固有の設定のようです。

なのでリセットCSSを記述して固有の設定を打ち消しておきましょう。

リセットCSSのコードは以下の1行で済みます。

input[type="submit"], input[type="button"] { -webkit-appearance: none; }

submit属性とbutton属性のinput要素にリセットCSSを適用させています。

リセットCSS適用前

ios-img03

リセットCSS適用後

ios-img04

appearanceプロパティ 備考

appearanceというプロパティは、要素がそのブラウザにおける標準的なUI(外観)になるように指定します。

初期値では有効化されているので、無効化させることで固有のborder-radiusやbackgroundの設定が無効になります。

ちなみにベンダープレフィックス必須です。

DOE(横浜)のニュースとブログ

News News

横浜のWeb制作会社DOEはホームページ制作に関連するWeb技術、Webデザイン、SEO対策情報など人気&おすすめ記事を随時公開中です。
尚、Twitterでは現場の声がリアルタイム配信中です。良かったらShareして繋がってください。