【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
セレクトボックスをカスタマイズした際に、デザイン変更後あれれ、矢印が機能しない…?という事がありました。
::afterでデザイン矢印を付けてカスタマイズした場合に、
CSSで「pointer-events: none;」を指定することで、マウスの機能を無くしその下のselect boxを機能させることで簡単に対応ができたので、メモを残してしておきたいと思います!
Font Awesomeなどでafterの矢印を指定している場合などにも同様の方法でできます。
1 2 3 4 5 |
<select> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; width: 100%; padding: 10px; border: 1px solid #999; background: #eee; background: -webkit-linear-gradient(top, #fff 0%,#efebe1 100%); background: linear-gradient(to bottom, #fff 0%,#efebe1 100%); } select::-ms-expand { display: none; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #828c9a; } select::after { display: block; content: " "; position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; margin-top: -8px; background: url(arrow02.png) 0 0 no-repeat; background-size: 20px; pointer-events: none; } |
Miki Kohinata
大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。
PICK UP