Codeworks Notes

 2020-03-11

Webデザイン
CSS
フロントエンド

iOSのSafariだけform子要素のスタイルが効かない

独自スタイルが最優先

iOS の Safari にはテキストボックスからラジオボタン、送信ボタンまで一貫して独自のデザインがなされており、CSS でいくらいじっても外観が変更されない仕様があります。
実機で見ないとわからない部分ですが、実際に見ると結構ひどくてつらい。

解決方法

CSS が効くようにするために、この初期デザインを -webkit-appearance で無効化することができます。

input[type="text"],
input[type="radio"],
textarea {
  -webkit-appearance: none;
}

input 要素の type 属性は他にも多種ありますが、同様に設定することができます。