セレクト要素の矢印を消して独自の矢印を表示する方法

セレクト要素を表示させると、デフォルトで下向きの矢印が表示されますが、Webサイトのデザインによって、この矢印のデザインを変更したい時があります。

デフォルトの矢印ではデザイン変更に限界があるので、独自でスタイル調整した矢印を表示させるのが望ましいです。

今回は、「この矢印の消し方」と「独自の矢印を表示させる方法」をご紹介します。

セレクト要素の矢印の消し方

矢印はCSSで簡単に消すことができます。

See the Pen selectの矢印を消す by spiqa design (@spiqa_design) on CodePen.

appearance: none;を指定するだけです。

しかし、これだけではIEで消えないため、IEにも適用させたい場合は以下を追加してください！

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

これで、主要ブラウザ(Chrome, Firefox, Safari, Edge, IE)で矢印を消すことができます。

デフォルトの矢印を復活させたい場合

逆に、resetのスタイルが効いていて、セレクト要素のデフォルト矢印を復活させたい場合は、以下コードを記述することで表示させることができます。

select {
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
  appearance: menulist;
}

/*IE用*/
select::-ms-expand {
    display: block;
}

セレクト要素に任意の矢印を表示させる方法

セレクト要素に擬似要素(before, after)が使えない？

矢印を無事消すことができたところで、独自の矢印を表示させる方法です。

多くの場合は、疑似要素(before, after)を使用して、矢印を表示させることが多いでしょう。

疑似要素(before, after)についての記事はこちら

セレクト要素の矢印を消して独自の矢印を表示する方法

しかし、実はセレクト要素に疑似要素で矢印を表示させようとしても、表示されません。

実際に以下コードをご覧ください。
※見やすくするためにselectを少しスタイル調整しています。

See the Pen selectに独自の矢印を表示させる(失敗例) by spiqa design (@spiqa_design) on CodePen.

セレクト要素に直に疑似要素(after)を指定し、矢印を表示させる記述をしています。

しかし、なぜかセレクト要素には疑似要素が表示されない仕様になっているようです…。

解決法：セレクト要素の親要素に指定する

セレクト要素にどうやっても疑似要素が表示されないので、セレクト要素の親要素の疑似要素に矢印を表示させます。

See the Pen selectに独自の矢印を表示させる by spiqa design (@spiqa_design) on CodePen.

疑似要素には、必ずpointer-events: none;を指定してください。この指定がなければ、矢印をクリックしてもプルダウンメニューが表示されません。

矢印を絶対配置でセレクトボックスの上に配置しているだけなので、矢印はプルダウンメニューのトリガーにはなっていません。

そのため、矢印にマウスの機能をなくすことで、矢印をクリックした時にその下のセレクトボックスが機能するようにします。

あとは表示させた矢印を、ちょうどいい場所に調整して完了です！

セレクト要素の矢印を消して独自の矢印をカスタマイズする方法のまとめ

• セレクト要素のデフォルト矢印を消すには、appearance: none;を指定
• セレクト要素には疑似要素を指定できない
• セレクト要素の親要素に指定することで独自の矢印を表示させる

以上、「セレクト要素の矢印を消す方法」と「任意の矢印をカスタマイズする方法」でした。

当時セレクト要素の疑似要素指定できない問題を知らず、独自の矢印を表示させようとして数時間を費やしてしまいました…。

ハマってしまう前に、ご参考いただけましたら幸いです！

こちらの記事もおすすめ

セレクト要素の矢印を消して独自の矢印を表示する方法