【CSS】select（セレクトボックス）の矢印マークのカスタマイズ方法

セレクトボックスの矢印マークのデザインを自由にカスタマイズしたいケースは非常に多く発生します。

この記事では、セレクトボックスの矢印マークをCSSで自由なデザインにカスタマイズする方法を、

• background-imageで自由な画像を当てはめる
• before, after擬似要素で矢印をつくる

の２パターンの方法に分けて紹介します。

下準備：デフォルトの矢印マークを消す

select要素にはデフォルトで矢印マークが表示されていますが、ブラウザの種類によってデザインが異なる上、デフォルトの矢印に直接CSSでスタイルを当てることは出来ません。

■ Chromeのデフォルト表示例

■ Safariのデフォルト表示例

そのため、select要素のデフォルトの矢印は非表示にし、CSSで自前で矢印マークをつくる実装が必要になります。

CSSで以下のように記述することで、select要素のデフォルトのスタイルを消すことができます。

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

上記の記述により、select要素のデフォルトの矢印マークが非表示になります。

select::-ms-expand {
  display: none;
}

① background-imageで自由な画像を当てはめる

一番シンプルに実装できる上、どんなデザインの矢印にも対応可能です。

まずは、デザインから画像を書き出す、もしくはアイコン素材サイトからダウンロードする等して、矢印マークとして使用する画像を用意します。（矢印マークはシンプルな図形なので、SVG形式が適しています）

この記事では例として、以下の画像を使用することにします。

この画像をselect要素の背景画像にすることで、矢印のデザインを自由に設定できます。

select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("./img/arrow.svg");
    background-repeat: no-repeat;
    background-size: 24px auto; /* 画像のサイズ（幅 高さ）*/
    background-position: right 12px center; /* 画像の位置 */
}

上記記述により、セレクトボックスに自由な矢印アイコンを当てはめることが出来ました。

backgroundに関するプロパティは、以下のように１行にまとめて記述することも可能です。

select {
    background: url("./img/arrow.svg") no-repeat right 12px center / 24px auto;
}

② before, after擬似要素で矢印をつくる

こちらは、擬似要素（::beforeや::after）を使用してCSSだけで矢印マークをつくる方法になります。
対応できるデザインに制限がありますが、画像を使用できない or 使用したくない場合などに有効な手段です。

背景画像で実装する方法と異なり、select要素を包括する親要素のhtmlタグが必要になります。

<div class="select_wrapper">
    <select name="select">
        <option value="">選択してください</option>
    </select>
</div>

selectタグの親要素（.select_wrapper）の擬似要素にスタイルを当てることで、矢印マークをつくります。
selectタグ自身にはbeforeやafter擬似要素を適用できない点に注意しましょう。

例１

上画像のような矢印マークを作成したい場合は、以下のCSSで実現できます。

.select_wrapper {
    position: relative;
}

.select_wrapper::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 16px;
    width: 12px;
    height: 12px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
}

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

例２

上画像のような矢印マークを作成したい場合は、以下のCSSで実現できます。

.select_wrapper {
    position: relative;
}

.select_wrapper::after {
    content: "";
    position: absolute;
    top: 22px;
    right: 12px;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-top: 12px solid #555;
    border-bottom: 0;
}

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

矢印マークをクリックしてもセレクトボックスが開くようにする

擬似要素を使う方法では、擬似要素がセレクトボックスの前面に表示されている影響で、矢印マークをクリックした場合に反応がありません。

擬似要素のCSSに以下の記述を追加し、矢印をクリックしてもセレクトボックスが開くようにすると親切です。

.select_wrapper::after {
    pointer-events: none;
}

まとめ

セレクトボックスの矢印マークを自由なデザインにカスタマイズする方法を、

• background-imageで自由な画像を当てはめる
• before, after擬似要素で矢印をつくる

の２パターンに分けて解説しました。

個人的には、余計なhtmlタグを増やさずシンプルに実装できる「①background-imageで自由な画像を当てはめる」方法を多用していますが、要件や個人の好みに応じて使い分けてみてください。