CSSのappearanceを使ったセレクトボックスのカスタマイズ | design Edge

テクノロジーカテゴリーの変更を依頼記事元:

edge.sincar.jp

78 usersがブックマークコメント

CSSのappearanceを使ったセレクトボックスのカスタマイズ | design Edge

これを適用すると、以下のような外観になります。元のスタイルがなくなり、右端の矢印も消えてなくなり... これを適用すると、以下のような外観になります。元のスタイルがなくなり、右端の矢印も消えてなくなります。今のところ、ChromeやFirefoxでもappearanceはベンダープレフィックス（-webkit-や-moz-など）が必要です。（キャプチャは Mac版Chrome）なお、自動的に最新バージョンを使うことになるのであまり気にすることはないと思いますが、Firefox30〜34では「-moz-appearance: none;」が機能しないというバグがあったようです。詳しくは、GitHub「How to hide <select> dropdown’s arrow in Firefox when using “-moz-appearance: none;”.」で書かれています。この不具合はバージョン35で修正されたということで、35、36で確認したところ問題ありませんでした。

reboot_in “セレクトボックスそのままではほとんどスタイルを適用することはできません。まずはデフォルトのスタイルを無効にする必要があります。” > appearance: none

css3

2022/02/13 リンク

winterfall “「:after」疑似要素に「pointer-events: none;」としておくことで、マウスイベントのターゲットから除外し、下に存在するselectが反応するようにしておきます。”

2018/10/23 リンク

lingling_yas “width: 100%; padding: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #999; background: #eee; background: url(arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%); background: url(arrow01.png) right 50% no-repeat, linear-g

2015/10/05 リンク