〜 無料体験可能なプログラミングスクールはコチラ 〜

HTML/CSS

【CSS】Safariでinput・select要素のスタイルをリセットする方法

input・selectタグのデフォルトスタイルを無効化

各ブラウザでは、それぞれ標準で「デフォルトスタイルシート」と呼ばれる、特定のスタイルが適用されています。

そのため、コーディングした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プロパティ適用後appearanceプロパティ適用後

ユウマ
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要素のスタイルを統一

ユウマ
なお、今回はinput・select要素の角の丸み+ボーダーの違いのみ統一しましたが、当然paddingや文字色なども統一することが可能です。

まとめ

この記事では、Safariでinput・select要素のスタイルをリセット(統一)する方法について解説しました。

重要な部分だけもう一度お伝えします。

要素のデフォルトスタイルをリセットするには、「appearance: none;」を使用するということを覚えておきましょう!

-HTML/CSS

© 2021 ユウマのブログ