Perl Web開発者のHTML・CSS入門

iphone/safariで、テキストフィールドやボタンのデフォルトデザインが適用されてしまうのを解決

iphone/safariで、テキストフィールドやボタンのデフォルトデザインが適用されてしまうのを解決するには、「-webkit-appearance:none;」を指定します。

「*」ですべての要素に設定しておくのが簡単でしょう。

* {
  -webkit-appearance:none;
}

これを指定すると、チェックボックスやラジオボタンが消えてしまうので注意してください。チェックボックスやラジオボタンを含めて、すべてオリジナルデザインにするときは、上の設定は便利です。

指定なし

iphone/safariでは、よく見るとうっすり薄い影のようなものがでていますでしょうか? これはiphone/safariのデフォルトデザインです。

<div>
  <input type="text" style="border:1px solid green;">
</div>

指定あり

<div>
  <input type="text" style="-webkit-appearance:none;border:1px solid green;">
</div>