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

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

最終更新日: 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の場合は少しやり方が異なるので注意が必要です、、
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram