Webデザイン
CSS
フロントエンド
iOSのSafariだけform子要素のスタイルが効かない
独自スタイルが最優先
iOS の Safari にはテキストボックスからラジオボタン、送信ボタンまで一貫して独自のデザインがなされており、CSS でいくらいじっても外観が変更されない仕様があります。
実機で見ないとわからない部分ですが、実際に見ると結構ひどくてつらい。
解決方法
CSS が効くようにするために、この初期デザインを -webkit-appearance で無効化することができます。
input[type="text"],
input[type="radio"],
textarea {
-webkit-appearance: none;
}
input 要素の type 属性は他にも多種ありますが、同様に設定することができます。