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

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

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

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

矢印(▼)の消し方

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

select {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
select::-ms-expand {
 display: none;
}

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

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

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

HTML

<div>
  <select>
    <option value="ダミーダミー">ダミーダミー</option>
    <option value="ダミーダミー">ダミーダミー</option>
    <option value="ダミーダミー">ダミーダミー</option>
    <option value="ダミーダミー">ダミーダミー</option>
    <option value="ダミーダミー">ダミーダミー</option>
  </select>
</div>

CSS

div {
  position: relative;
  z-index: 1;
}
div select {
  border: 1px solid #efefef;
  padding: .75em 1em 1em;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
div select::-ms-expand {
 display: none;
}
div::after {
  position: absolute;
  z-index: 2;
  right: 11px;
  top: 30%;
  content: "▼";
  font-size: 15px;
  width: 20px;
  height: 20px;
  display: block;
  text-align: center;
}

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

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

まとめ

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

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

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

Follow me!

無料資料ダウンロード

以下6つのファイルが無料で一括ダウンロードできます。

【1】業者へ依頼する前に!押さえておくべきLPの基礎知識

【2】【保存版】絶対に抑えておきたい!WEB集客の方法5選

【3】【最新】WEBマーケティングで集客を考える!5G時代の新しい広告5選

【4】広告を出稿する前に!「成果につながる」ホームページのつくり方をご紹介

【5】SNS集客のメリット5つ!ファンを逃さない効果的な方法とは?

【6】当社WEBマーケティングのサービス詳細資料

最近の記事

  • 関連記事

コメント

この記事へのコメントはありません。

PAGE TOP