プルダウンメニュー(select要素)の矢印をオリジナルにカスタマイズ

プルダウンメニュー(select要素)の矢印をカスタマイズし、オリジナルの矢印を設置した際、そのオリジナルの矢印の上をクリックしても、プルダウンが開かない事象に遭遇しました。

矢印をクリックしてもプルダウンが開かない。注)これは画像です。

そのため、今回は、オリジナルの矢印の設置方法と、そのオリジナルの矢印の上をクリックしても問題なくプルダウンメニューが開く方法について、掲載したいと思います。

1.プルダウンメニュー(select要素)の矢印のカスタマイズの流れ
2.デフォルトの矢印の非表示化を行う。
3.独自の矢印を表示する。(今回は、オリジナルの矢印にfontawesomeを使っています。)
4.オリジナルの矢印の上をクリックしても、プルダウンメニューが開くようにする。

1.プルダウンメニュー(select要素)の矢印のカスタマイズの流れ

以下のデフォルトのプルダウンメニュー(select要素)の右側の矢印をオリジナルの矢印にカスタマイズします。

プルダウンメニュー(select要素)の右側の矢印のカスタマイズは、以下のような流れとなります。

①デフォルトの矢印の非表示化を行う。

②独自の矢印を表示する。(今回はfontawesomeを使っています。)

※fontawesomeについて分からない方は、こちらをご参照ください。時間があれば、fontawesomeについても別途ブログで紹介していきます。)

③独自の矢印の上をクリックしても、プルダウンメニューを開くようにする。

それでは、実際にやっていきましょう。

2.デフォルトの矢印の非表示化を行う。

cssで該当のselect要素に対し、appearance: none; を指定するだけです。

select{
    appearance: none;
}

1

2

3

select{

appearance: none;

}

この状態だと以下のような表示になります。

これで、右側の矢印が無効化されています。

3.独自の矢印を表示する。(今回は、オリジナルの矢印にfontawesomeを使っています。)

ただし、select要素には、疑似要素(before、after)が使えません。そのため、select要素の疑似要素を使って、select要素の上にカスタマイズした矢印を配置しようとしても実装できませんので、ご注意ください。

では、どうやって実装するのかといいますと、select要素の親要素の疑似要素(下記の例は、after)を使用してカスタマイズします。

.select-wrap{	/* selectボックスの親要素 */
	position:relative;
}
select-wrap:after{	/* selectボックスの親要素にオリジナルの矢印を宣言 */
	content:'\f078';	/* fontawesomeのアイコン表示 */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
 	text-rendering: auto;
	line-height: 1;
	color:var(--sub-color);
	width:0;
	z-index:0;
	position:absolute;
	top:50%;
	right:25px;
	transform:translateY(-50%);
}
select{	/* select要素 */
	appearance: none;
}

1

2

3

4

5

6

7

8

9

10

11

12