ブログBlog

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

 

これで表示できます。

ただし、クリックして頂けるとわかりますが、オリジナルで作成した右側の矢印のちょうど上をクリックした場合プルダウンメニューが開きません。これを次の項で改善します。

 

4.オリジナルの矢印の上をクリックしても、プルダウンメニューが開くようにする。

前項のselect要素をクリックして頂けるとわかりますが、この状態ですと、配置したオリジナルの矢印の上をクリックしてもプルダウンメニューが表示されない場合があります。

なぜならば、select要素の上にオリジナルの矢印が配置されているためです。そこで、親要素の疑似要素に対し、pointer-events:noneを指定する事で、子要素のみ有効にすれば、矢印のちょうど上をクリックしても問題なく、プルダウンメニューが開くようになります。

 

 

これで完了です。カスタマイズした矢印のちょうど上をクリックしてもプルダウンメニューが開きます。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU