Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2017.12.26

select要素のカスタマイズ時に残る矢印アイコンを非表示にする

Tags: ,,
最終更新日:Update

今回は小ネタとして一つ。これまでにもフォーム周りのカスタマイズに関する記事をいくつかあげてきましたが、今回はselect要素に関する内容です。もちろんselect要素に関してもCSSでカスタマイズすることが可能ですが、少しポイントがあります。特にoption要素を選択するための矢印アイコンがなかなか消えなかったりします。

 

select要素のカスタマイズ時に残る矢印アイコンを非表示にする

 

そうですね、これですね。
今回はその矢印アイコンを消す方法を備忘録として残しておきます。

// 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;
 }

 

このように上記コードで矢印アイコンを消すことができます。

 

select要素のカスタマイズ時に残る矢印アイコンを非表示にする

IEの場合は少しやり方が異なるので注意が必要です、、

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?