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

記事内に広告を含みます

パソ君

・セレクトボックスの矢印ってどうやってカスタマイズするの？

こんな疑問にお答えします。

お問い合わせフォーム作成時や、アーカイブ記事を探すときにセレクトボックスを使用しますよね。

あのセレクトボックス、デフォルトでは下記みたいな矢印になってるはず↓

この矢印、実はカスタマイズ可能です。

案件によってはデザイン性のある矢印になっている時があるので、実装方法を知っておくべし！

ジト

簡単にできるよ！

ということで、この記事では「select（セレクトボックス）の矢印カスタマイズ方法」について解説していきます！

この記事でわかること

・select（セレクトボックス）の矢印カスタマイズ方法【疑似要素編】
・select（セレクトボックス）の矢印カスタマイズ方法【画像利用編】

【解説】select（セレクトボックス）の矢印カスタマイズ方法【疑似要素編】
【解説】select（セレクトボックス）の矢印カスタマイズ方法【画像利用編】
- selectタグに対して背景画像
- 疑似要素で背景画像を指定
【解説】select（セレクトボックス）の矢印カスタマイズ方法【CSS】：まとめ

【解説】select（セレクトボックス）の矢印カスタマイズ方法【疑似要素編】

セレクトボックスの矢印をカスタマイズしたサンプルがこちらになります。

See the Pen ➀セレクトボックス矢印 by jito-coder (@jito-coder) on CodePen.

デフォルトとは違い、オレンジ色の三角形の形になっていますよね。

<div class="select-box">
    <select name="select" class="select-box__item">
        <option value="">選択して下さい</option>
        <option value="サンプル2">サンプル2</option>
        <option value="サンプル3">サンプル3</option>
        <option value="サンプル4">サンプル4</option>
    </select>
</div>

.select-box {
    width: 100%;
    max-width: 200px;
    margin: 30px auto 0;
    position: relative;
}
.select-box::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: orange transparent transparent transparent;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    pointer-events: none;
}

.select-box__item {
    width: 100%;
    padding: 10px;
    // デフォルトの矢印を削除
    -webkit-appearance: none;
    appearance: none; 
}

// IE用
.select-box__item::-ms-expand{
    display: none;
}

カスタマイズ方法の手順がこちら↓

divタグでselectタグを囲む
デフォルトの矢印を削除する
divタグに疑似要素を指定して矢印を作成

順に見ていきましょう

➀：divタグでselectタグを囲む

まずselectタグに対して、親要素のdivタグを作成して囲みます。

<div class="select-box">
    <select name="select" class="select-box__item">
        <!-- optionタグが入ります -->
    </select>
</div>

今回でいうと「select-box」というクラスをつけたdivタグで囲みました。

➁：デフォルトの矢印を削除する

次にデフォルトで元々表示されている矢印を削除しましょう。

「appearance」に対してnoneを指定してあげれば、消すことができます。

またIE対策をする方は、下のコードも記述しましょう。

.select-box__item {
    // デフォルトの矢印を削除
    -webkit-appearance: none;
    appearance: none; 
}

// IE用
.select-box__item::-ms-expand{
    display: none;
}

➂：divタグに疑似要素を指定して矢印を作成

あとは新たにカスタマイズした矢印を作成して反映すれば実装完了です。

やり方は➀で作成した親要素のdivタグに対して、疑似要素を指定して矢印を反映します。

.select-box::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: orange transparent transparent transparent;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    pointer-events: none;
}

これでオレンジ色の矢印を作成することができました。

大きさや位置をデザインに沿ってカスタマイズすることで、案件通りの矢印を実装することができます！

なぜdivタグに対して疑似要素を指定するの？

ここまで読んだ方の中には、なぜわざわざdivタグを作ってそれに疑似要素を指定するんだと思った方もいるはず。

selectタグに対して指定すれ良いのでは？と思いますよね。

が、それは不可能なんですよ。。

実はselectタグには疑似要素を反映することができません。

そのため新たにdivタグを作って、それに対して疑似要素を実装するんですよね！

【解説】select（セレクトボックス）の矢印カスタマイズ方法【画像利用編】

最後に矢印カスタマイズ方法として、画像を使うやり方を紹介していきます。

selectタグに対して背景画像
疑似要素で背景画像を指定

selectタグに対して背景画像

こちらはselectタグに対して、背景画像を指定してカスタマイズしたサンプルです。

僕のアイコン画像が表示されていますよね。

See the Pen ➁セレクトボックス矢印 by jito-coder (@jito-coder) on CodePen.

追記したのは下記コード。

.select-box__item {
    background-image: url('https://jito-site.com/wp-content/uploads/2023/01/jito-icon.png');
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
}

疑似要素で背景画像を指定

これは疑似要素に背景画像を指定して、矢印をカスタマイズするやり方。

親要素のdivタグ疑似要素にて、背景画像を指定しています。

See the Pen ➂セレクトボックス矢印 by jito-coder (@jito-coder) on CodePen.

追記したコードがこちら。

.select-box::before {
    content: "";
    display: inline-block;
    width: 30px;
    padding-top: 30px;
    background-image: url(https://jito-site.com/wp-content/uploads/2023/01/jito-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    pointer-events: none;
}