今回は小ネタとして一つ。これまでにもフォーム周りのカスタマイズに関する記事をいくつかあげてきましたが、今回はselect要素に関する内容です。もちろんselect要素に関してもCSSでカスタマイズすることが可能ですが、少しポイントがあります。特にoption要素を選択するための矢印アイコンがなかなか消えなかったりします。
そうですね、これですね。
今回はその矢印アイコンを消す方法を備忘録として残しておきます。
// HTML
<select>
<option>選択肢1
</option>
<option>選択肢2
</option>
<option>選択肢3
</option>
</select>
// CSS
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
// CSS（IE10〜）
select::-ms-expand {
display: none;
}
このように上記コードで矢印アイコンを消すことができます。
IEの場合は少しやり方が異なるので注意が必要です、、
