• HTMLCSS
• プログラミング

【CSS】select（セレクト）要素の矢印を消して画像にする方法

select要素にデフォルトのスタイルである矢印を消して、任意の画像に変更したい。

この様な悩みを解決します。

本記事では、CSSを使って、select要素のデフォルトスタイルである矢印を消し、画像にする方法について解説します。

appearanceプロパティをselect要素に付与し矢印を消す

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

select要素にappearance: none;を付与する事で、デフォルト矢印を消すことができます。

上記だけだとIEブラウザで反映されないので、select::-ms-expandを追加することでIEも矢印を非表示にできます。

select要素に任意の矢印画像を付与

  select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url(../arrow03.png);
    background-size: 9px 6px;
    background-repeat: no-repeat;
    background-position: center right 10px;
  }
  select::-ms-expand {
    -webkit-appearance: none;
    appearance: none;
  }

あとはselect要素にbackground-image、background-size、background-repeat、background-positionを使って矢印を背景画像として設置してあげればOKです。

以上で完成です。

まとめ

select要素の矢印スタイルは、使用するブラウザより異なる表示になるので、本記事のやり方で任意のスタイルに統一しても良いかも知れません。

以上で解説を終わります。