今回は「セレクトボックスでデフォルトで表示される矢印アイコンを消す方法」について紹介したいと思います。

矢印に別の画像を表示させたい時に便利です。

［CSS］セレクトボックスでデフォルトで表示される矢印アイコンを消す方法

完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

セレクトボックスのデフォルトで表示される矢印アイコンが消えていることが分かるでしょう。

それでは早速サンプルコードを見ていきましょう。

サンプルコード

HTMLコードはこちら。

<select>
    <option value="">選択１</option>
    <option value="">選択2</option>
    <option value="">選択3</option>
    <option value="">選択4</option>
</select>

そして、セレクトボックスに対して「appearance: none;」を指定することで、デフォルトで用意されている矢印アイコンを消すことができます。

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

簡単なので是非参考にしてみてください。