iOS系でinputタグにCSSが効かない原因とその対処法

iPhoneやiPadなど、iOS系のブラウザでinputタグにCSSが効かない原因と対処法について解説します。

 

input要素にCSSが効かない理由

iOS系のブラウザでCSSが効かない理由は、Safariなどのwebkit系のブラウザにはデフォルトのスタイルが指定されているからです。

つまり、デフォルトのスタイルを消せばiOS系のブラウザでもCSSを適用することができるわけです。

reset.cssを使っている場合は問題なくCSSが効いているはずです。

 

例えば、以下のようなinputタグのボタンがあるとします。

HTML

<input type="submit" value="ボタン" />

 

CSS

input[type="submit"] {
  font-weight: bold;
  padding: 5px 10px;
  color: #fff;
  border: none;
  background-color: cornflowerblue;
}

 

ほとんどのブラウザではCSS通りにスタイルが適用できますが、これだとiOS系のブラウザだけが全く別の見た目になってしまいます。

この両者の差をなくすためにデフォルトのスタイルをリセットします。

 

デフォルトのスタイルをリセットする方法

reset.cssを読み込んでしまうのが一番簡単ですが、一部のデフォルトのスタイルだけを変更したい場合はその都度スタイルを一度リセットします。

先ほど紹介したiOS系のブラウザのinputタグのスタイルをリセットするには以下のCSSを指定します。

input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}

 

これでwebkit系のブラウザでもCSSが通常通り効くようになります。

 

他のボタンのスタイルも消したい場合はまとめて指定してしまいましょう。

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

 

また、全てのwebkit系のスタイルが不要な場合は以下のように指定すればokです。

* {
  -webkit-appearance: none;
}