セレクトボックスのアイコンの変更(プルダウンの矢印)

自分の為の備忘録

#セレクトボックスを出す
.pulldown
%div
%select.pulldown__detail{:name => "month" }
%option{:value => "1"} 01
%option{:value => "2"} 02
%option{:value => "3"} 03
%option{:value => "4"} 04
%option{:value => "5"} 05
%option{:value => "6"} 06
%option{:value => "7"} 07
%option{:value => "8"} 08
%option{:value => "9"} 09
%option{:value => "10"} 10
%option{:value => "11"} 11
%option{:value => "12"} 12
%span 月
%div

セレクトボックスに関しては、コピペサイトが多数あるので、そちらから拝借。
月という文字が並列に表示されていなかったが、%divでラッピングして、 %select.pulldown__detaiと%span 月のインデントを調整したらいい感じになった。

これだけだと備え付けの矢印が表示されるので、CSSにアイコンを変えるための記述をする。
<参考>https://gray-code.com/html_css/change-design-for-pulldown-menu/

.pulldown{
display: block;
&__detail{
padding-left: 15px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(/assets/chevron-down-solid.svg);
background-repeat: no-repeat;
background-size: 10px 30px;
background-position: right 10px center;
font-size: 8px;
margin-bottom: 10px;
height: 40px;
width:100px;
background-color:white;
border-width: 1px;
border-style: solid;
border-color: #ccc;
}

background-image: url(/assets/chevron-down-solid.svg);は画像が保存されている箇所を指定。
なお、画像はFontAwesomeでsvg形式で保存可能。

1. 変更前

2.変更後