なんにもない日の頭の中はこんなもんだったりする

【CSS】input、textareaのCSSを初期化する(iOS対策)

  • 2019.9.26
【CSS】input、textareaのCSSを初期化する(iOS対策)
きのこさん
ちょっとメモですー
きのこさん
よく忘れてしまうのでメモですー

なぜ初期化?

iOS Safariではのフォーム要素(input,textarea)がデザイン通りにならないとこがあります。
iOS Safariのデフォルトスタイルが優先されてしまうからです。
そんな時に必要なのが、値の初期化です。

対応策

『appearance』に『-webkit-(ベンダープレフィクス)』をつけて、値を初期化しておきましょう。

input,textarea {
  -webkit-appearance: none;
}

さいごに

きのこさん
ブラウザ対策って大変ですねー
きのこさん
そうなんですよー
Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

「ÉHON INC.」はオーダーメイド絵本ギフトサービスです
coneri渋谷
  • 2020.01.20New
  • coneri渋谷
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
三角くん/窓の家と生活
1月26日