概要
フォーム要素の<select>のスタイルを変更するため、元のスタイルを非表示にしてからスタイルを適用した。元のスタイルを表示しない場合矢印も消えるため、独自の矢印を表示する方法もあわせて調べた。
デフォルトの<select>は以下のようになる。
<selectname="sample"id="select"class="select"><optionvalue=""default></option><optionvalue="1">option1</option><optionvalue="2">option2</option><optionvalue="3">option3</option></select>
そのままスタイルを変更してみる
デフォルトのスタイルから、
- 幅・高さ
- 枠線の色や太さ・角丸
- 背景色
- 文字の色や大きさ
を変更してみる。
.select{width:150px;height:50px;border:3pxsolid#FF0000;border-radius:20px;background-color:#FFFF00;color:#0000FF;font-size:20px;} ←Chrome Firefox→
Chromeの場合は角がborder-radiusで指定した値になっていない（他の値を指定しても変わらず）。
Firefoxでは、矢印部分が違和感のあるスタイルになってしまう。
<select>のスタイルを消す
そこで、元々の<select>のスタイルが表示されないようにして、その上から好きなスタイルを適用することにする。appearance: none;を指定することで元々のスタイルを無効にできる（ベンダープレフィックスが必要）。
.select{&::-ms-expand{display:none;// IE}-webkit-appearance:none;// Chrome, Safari (Firefoxでも効いた)-moz-appearance:none;// Firefoxappearance:none;border:3pxsolid#FF0000;border-radius:20px;width:150px;height:50px;background-color:#FFFF00;color:#0000FF;font-size:20px;} ←Chrome Firefox→
これで、意図したスタイルを適用できるようになった。
再び矢印を表示する
元々のスタイルを打ち消したことで、矢印が表示されなくなり、セレクトボックスかどうか少し分かりづらくなった。そこで、改めてそれっぽい矢印を表示することにする。::beforeや::afterで作成するのが簡単だが、<select>には追加できない。そのため、<div>等で<select>を囲み、その<div>に擬似要素を追加する。
.select-container{// div要素overflow:hidden;position:relative;// ::before要素をabsoluteで表示するため&::before{position:absolute;top:50%;right:15px;transform:translateY(-50%);content:"▼";// これだけでもそれっぽい下三角矢印にできる}border:3pxsolid#FF0000;border-radius:20px;width:150px;height:50px;.select{width:100%;height:100%;&::-ms-expand{display:none;}-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#FF0000;border:none;// noneにしないと見えてしまうpadding:020px;color:#0000FF;font-size:20px;}}
<select>のwidthやheightを指定しない場合、以下のようになってしまう。
borderで三角を作る
::beforeや::afterのborderを利用して、矢印を表示してみる。
要素のwidth・heightを0にしてborderを表示すると、以下のように三角ができる。
&::before{position:absolute;top:50%;right:15px;transform:translateY(-50%);content:"";width:0;height:0;border-top:15pxsolid#555555;border-left:15pxsolid#FF00FF;border-right:15pxsolid#ABCDEF;border-bottom:15pxsolid#000000;}
これを利用して、下三角矢印を表示する。
.select-container{&::before{position:absolute;top:50%;right:15px;transform:translateY(-50%);content:"";width:0;height:0;border-top:15pxsolid#555555;border-left:10pxsolidtransparent;border-right:10pxsolidtransparent;}}
2つ組み合わせて上下矢印を作成することもできる。
.select-container{&::before{position:absolute;top:27%;right:15px;content:"";width:0;height:0;border-bottom:10pxsolid#00FF00;border-left:7pxsolidtransparent;border-right:7pxsolidtransparent;}&::after{position:absolute;top:54%;right:15px;content:"";width:0;height:0;border-top:10pxsolid#00FFFF;border-left:7pxsolidtransparent;border-right:7pxsolidtransparent;}}
矢印部分をクリックできるようにする
現状では、矢印部分をクリックしても<select>が反応しない。
そこで、pointer-events: none;を指定して擬似要素のクリックを無効にする。
.select-container{&::before{position:absolute;top:50%;right:15px;transform:translateY(-50%);content:"▼";pointer-events:none;}}
矢印部分もクリックできるようになった。
まとめ
appearance: none;で元の<select>のスタイルを表示しないようにして、新たにスタイルを適用した。- 擬似要素で矢印を表示した。
最終形態
See the Pen
select by mmmmk (@mmmmmmk)
on CodePen.