select要素のカスタマイズ時に残る矢印アイコンを非表示にする
最終更新日: Update!!
今回は小ネタとして一つ。これまでにもフォーム周りのカスタマイズに関する記事をいくつかあげてきましたが、今回はselect要素に関する内容です。もちろんselect要素に関してもCSSでカスタマイズすることが可能ですが、少しポイントがあります。特にoption要素を選択するための矢印アイコンがなかなか消えなかったりします。
そうですね、これですね。
今回はその矢印アイコンを消す方法を備忘録として残しておきます。
IEの場合は少しやり方が異なるので注意が必要です、、

// 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; }このように上記コードで矢印アイコンを消すことができます。

sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories