コンテンツへスキップ

iPhoneのSafariでinputタグに思ったようにCSSが当たらなかった話

  • 未分類

WEBサイト制作では、制作段階で様々なブラウザや端末で表示や挙動の確認を行うことがあります。
OSで言えばWindows、Android、iOSなどなど、ブラウザで言えば、GoogleChrome、Microsoft Edge、Firefox、Safariがメインどころです。

2022年6月にIEのサポートが終了することによって、各ブラウザ間での仕様のズレが大きく改善されることになり、WEB分野の開発環境がかなり楽になっていくと思います。

と思いきや！
iOS環境のSafariって意外とバグと言っていいのか、独自の仕様と言うべきなのか思ったようになってくれないことがあるんですよね。

久しぶりにそんな事象にぶつかったので備忘録です。

<input type="button" value="ボタン">
input[type="button"] {
  display:inline-block;
  padding:10px 30px;
}

説明しやすいようにシンプルにしていますが、inputタグでボタンを設置し、cssでpaddingが当たるように設定しました。

Chromeで確認するとちゃんとcssがあたっているんですが、iPhoneのSafariで確認するとこのpadding効いてないんですよね…

iPhoneの場合は、以下のように「-webkit-appearance」プロパティを追加してやる必要があります。

input[type="button"] {
  display:inline-block;
  padding:10px 30px;
  -webkit-appearance: none;
}

これで思ったようにcssをあてることができました！

「-webkit-」という書き方は、ベンダープレフィックスと言いまして特定の環境に向けてcssを効かせるときに使われます。
ベンダープレフィックスは、以下の種類があります。
・-webkit-：Chrome、Safari
・-moz-：Firefox
・-o-：Opera
・-ms-：IE

今回は、-webkit-appearanceでSafari（iOSかも…）独自の初期スタイルを打ち消す形で、自分のスタイルをあてることができるようになりました。

iOSのSafariってinputタグやselectタグなどに独自の仕様を持っているケースが多くて、油断していると足を引っ張られるので覚えておいてください！

タグ: