CSSでselectの矢印をカスタマイズする方法｜疑似要素・背景画像・最新CSS

HTMLのselect要素（セレクトボックス）は、ブラウザー標準の矢印が表示されるため、そのままではデザインに合わせにくいことがあります。

selectの矢印をカスタマイズする方法は、大きく分けて次の3つです。

• background-imageで矢印画像を表示する
• 疑似要素でCSSだけの矢印を作る
• 対応ブラウザーで::picker-iconを使う

現在、幅広いブラウザーで安定して使いやすいのは、background-imageまたは疑似要素を使う方法です。

一方、新しいCSSでは::picker-iconを利用してselectのアイコン自体をカスタマイズする方法も登場しています。

この記事では、それぞれの実装方法と使い分けについて、実際のコードとあわせて解説します。

selectの矢印を変更する3つの方法

幅広いブラウザーを対象とする場合、background-imageまたは疑似要素を使う方法がおすすめです。

対応環境のみで問題ない場合は::picker-iconも選択肢になりますが、サポート状況はまだ限定的です。
（::picker-iconの対応状況はこちら）

下準備：selectのデフォルト矢印を非表示にする

select要素にはデフォルトで矢印マークが表示されておりますが、ブラウザによってデザインが異なります。

■ Chromeのデフォルト表示例

■ Safariのデフォルト表示例

自由なデザインの矢印を表示したい場合、まずはこのブラウザー標準の矢印を非表示にします。

CSSでappearance: noneを指定すると、ブラウザーが標準で表示しているselectの見た目を解除できます。

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

これにより、下画像のようにselect要素のデフォルトの矢印マークが非表示になります。

そのうえで、背景画像や疑似要素を使って独自の矢印を実装していきます。
従来のselectでは、ブラウザー標準の矢印そのものを自由にCSSで装飾するのが難しいため、この方法が一般的です。

なお、対応ブラウザーでは後ほど紹介する::picker-iconを使い、selectのアイコン自体をカスタマイズすることもできます。その場合、上記のappearance: noneの指定は不要です。

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

一番シンプルに実装できる上、どんなデザインの矢印にも対応可能です。
HTML側にタグを追加する必要がなく、select要素だけで実装できます。

まずは、デザインから画像を書き出す、もしくはアイコン素材サイトからダウンロードする等して、矢印マークとして使用する画像を用意します。（矢印マークはシンプルな図形なので、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; /* 画像の位置 */
}

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

ポイントは、右側のpaddingを少し大きめに取ることです。
矢印用のスペースを確保しておかないと、選択したテキストと矢印が重なる場合があります。

background-imageを使うメリット

• HTMLに追加タグが不要
• 画像のため複雑な形状やカラーにも対応できる
• selectの高さが変わっても中央配置しやすい

方法② 疑似要素でCSSだけの矢印を作る

画像を使わず、CSSだけで矢印を作ることもできます。

背景画像で実装する方法と異なり、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);
    pointer-events: none;
}

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;
    pointer-events: none;
}

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

擬似要素にはpointer-events: none;を指定しておくと良いです。
これを指定しないと、矢印部分がクリックを受け取ってしまい、矢印をクリックしたときにselectが開かない場合があります。

pointer-events: noneを指定することで、擬似要素の矢印をクリックしても背後のselectを操作できます。

方法③ ::picker-iconでselectの矢印を変更する

比較的新しいCSSでは、Customizable Selectの仕組みにより、対応ブラウザーで::picker-iconを使ってselectのアイコンをカスタマイズできます。
（::picker-iconの対応状況はこちら）

例えば、次のように指定できます。

select,
::picker(select) {
    appearance: base-select;
}

select::picker-icon {
    color: #666;
    transition: rotate 0.2s;
}

select:open::picker-icon {
    rotate: 180deg;
}

::picker-iconを使うと、従来のように標準矢印を消して別の要素を重ねなくても、selectのアイコン自体をスタイリングできます。

さらに:openを使えば、選択肢を開いている間だけ独自のスタイルを当てる表現も可能です。

まとめ

selectの矢印をカスタマイズする代表的な方法は、次の3つです。

• background-imageで矢印の画像を表示する
• 疑似要素でCSSだけの矢印を作る
• 対応ブラウザで::picker-iconを使う

幅広いブラウザに対応する場合は、background-imageまたは疑似要素を使う方法が扱いやすいでしょう。

画像を使わずシンプルに実装したい場合は疑似要素、デザインされたアイコンをそのまま利用したい場合は背景画像が向いています。

また、Customizable Selectの対応が進むことで、今後は::picker-iconを使ったカスタマイズも一般的になっていく可能性があります。

ブラウザー対応状況を確認しながら、サイトの要件に合った方法を選択してください。