HTMLselect要素デザイン時に事件は起こった!select要素(プルダウン)のデザインを実装している時に、矢印アイコンを画像ではなくCSSのみで実装する場合の方が最近は多くなってきました。今回私もinput要素を非表示にし、label要素と擬似要素、beforeを使用しました。デザインはこんな感じで問題ありませんでした。ここで問題が!!Select要素(プルダウン)の上にある擬似要素beforeでデザインした矢印の位置をposition:absolute;で指定していました。矢印以外の位置をクリックした時には問題ありませんでした。これは地味に気持ち悪いですよね。そんな時に簡単に回避する方法がpointer-events:none;です!!矢印をデザインしているbefore要素に追加するだけで矢印エリアをクリックしても下にあるselect要素(プルダウン)が反応しました!!デモサイトを作成しましたのでこちらよりご確認いただけます!DEMOpointer-eventsって?結構検索すると分かりやすくまとめている方がいらっしゃるので、そちらを参考にしていただければと思います!こちらでも簡単にご説明を。pointer-eventsとは特定の要素がマウスイベントの対象になる際そのクリックの挙動を指定します。class="form__check-radio__text">チェック</span></label></div>レスポンジブサイトを実装する際にもaタグの切り替えに使えそうですね!!SPではブロックリンクを実装、PCでは各要素をリンクに切り替えたいとかけっこうあります。2019.04.12先日重い腰を上げてこのブログもHTTPS化しました。2019.09.12枠から上に少し出たレイアウトのリボンって、プレゼント枠だったり注目してほしい時など結構使うことがあります。コメントをキャンセルメールアドレスが公開されることはありません。(20)プロフィール都内在住30代小学生と保育園児の子を持つワーママです。最近やっと保育園の二ヶ所送迎から解放され育児にも少しだけ余裕がもてるようになりました。