各ブラウザでは、それぞれ標準で「デフォルトスタイルシート」と呼ばれる、特定のスタイルが適用されています。
そのため、コーディングしたWebサイトを各ブラウザでチェックしてみると、ブラウザによってスタイルが適用されてない…！と悩まされることも多いでしょう。
この記事では特にコーディング初心者がハマりがちな、「input・selectタグ」のスタイルをリセットし、正しくスタイルを適用する方法を解説していきます。
ChromeとSafari(iPhone)のデフォルトスタイル比較
まずはデフォルトスタイルをリセットしていない、素のinput・selectタグを見てみましょう。
以下画像は、Chrome, Safari, Safari(iPhone)のデフォルトスタイルです。
ユウマChromeでは必要最低限のスタイルのみ適用されていますが、Safari及びiPhoneでは、それぞれ少し特徴的なスタイルが適用されていることが分かりますね。
次にこの記事の本題でもある、これらのデフォルトスタイルを解除（リセット）する方法を見ていきましょう。
Safariでinput・select要素のスタイルをリセットする方法
input・select要素のデフォルトスタイルをリセットする
結論、Safariでinput・select要素のスタイルをリセットするには、CSSの「appearanceプロパティ」を使えばOKです。
具体的な使い方は以下の通り。
input, select {
-webkit-appearance: none;
appearance: none;
}上記コードのように「appearance: none;」を、input・selectタグに指定することで、ブラウザ特有のデフォルトスタイルを解除することができます。
appearanceプロパティを使うことで、input・selectタグはそれぞれ以下ような見た目になります。
ユウマappearanceを使う前に存在した、inputタグの影やselectタグの矢印が消えていることが分かります。
この段階では未だスタイルを解除しただけなので、次はブラウザ毎のスタイルを統一する為にスタイルをあてていきましょう。
input・select要素のスタイルをブラウザ間で統一する
ブラウザ毎のスタイルを統一するには、appearanceプロパティでデフォルトスタイルを解除した上で、普段通りCSSを適用すればOKです。
以下に一例として、要素の丸みとボーダーを統一する為のCSSを用意しました。
input, select {
-webkit-appearance: none;
appearance: none;
border: 1px solid #000;
border-radius: 0px;
}上記スタイルを適用することで、以下のようにブラウザ間でのスタイルの違いを無くすことができました。
ユウマなお、今回はinput・select要素の角の丸み＋ボーダーの違いのみ統一しましたが、当然paddingや文字色なども統一することが可能です。
まとめ
この記事では、Safariでinput・select要素のスタイルをリセット（統一）する方法について解説しました。
重要な部分だけもう一度お伝えします。
要素のデフォルトスタイルをリセットするには、「appearance: none;」を使用するということを覚えておきましょう！
