セレクトボックスの矢印を消すには?CSSでの変更方法

  • このエントリーをはてなブックマークに追加
  • Pocket

セレクトボックスの見た目を変えたい!という時ありませんか?

デフォルトのデザインだとあまりオシャレ感はありませんよね。周りのデザインに合わせてセレクトボックスも変更したいところ。

今回はCSSでセレクトボックスの見た目の変更方法や矢印の消し方をご紹介します!

矢印(▼)の消し方

消し方は簡単!appearance: none;とすれば矢印が非表示になります。
select::ms-expandはIE10以上に適用させるCSSです。

ちなみにappearanceは、UIの外観を変更する設定になります。
CSS3リファレンスに詳しく書かれています!

好みの見た目に近付けていく

矢印さえ消してしまえば、あとは好きなように変更していくだけです。
シンプルな形ですが一例を載せておきます。

HTML

CSS

こちらのCSSを当てると以下のようなセレクトボックスになります。
矢印がデフォルトのデザインから変わるだけで、少し雰囲気が変わったと思いませんか?

矢印ですが、疑似要素(::after)を使って▼を作り配置しています。背景画像で設定しても良いと思いますので、その辺りは実装しやすい方で行ってみて下さい!

まとめ

意外と需要のある内容だと思って書いてますが、いかがでしたでしょうか?(笑)

このセレクトボックスの見た目変更は、残念ながらIE9以下は対応していないようなので切り捨てる必要がありますね。

今後もWEB制作のお役に立てる記事をアップしていきますので、いいね・シェアして頂けると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket

WEB・ネット集客に困っていませんか?

ウェブヤではWEB・ネット集客に困っている企業やお店をサポートしています。

「ネットで集客したいけど、そもそも何をしたら良いか分からない」という方でもお気軽にご相談下さい。

御社のプラスになるよう全力でサポートします!

詳しくはこちら

SNSでもご購読できます。

コメントを残す

*