haml とscssでプルダウンを作る

カード有効期限を入力するプルダウンを作りたい！

こんなの作りたい〜〜〜

JSを使わずにhamlとscssだけでできる

.howtopay__card--month
 %select{:helper => ""}
  %option{:value => "1"} 01
  %option{:value => "2"} 02
  %option{:value => "3"} 03
  %option{:value => "4"} 04
  %option{:value => "5"} 05
  .card__month--icon
   = fa_icon("chevron-down") 
　.card__month--month 月

↑これでもできるけど冗長になってしまうのでこの好まれない

じゃあどうやればいいの

select_tagを使う

.howtopay__card--month
    = select_tag 'card[month]', options_for_select(["1", "2", "3", "4", "5"]) 

↓下向き矢印アイコン
.card__month--icon
 = fa_icon("chevron-down") 
.card__month--month 月

↑select_tagで書けばいい感じに短く簡単にできる

さらに、

controllerで

@card.month = params[:card][:month]

で値をとってこれる

scssも

.howtopay__card {
            position: relative;
            padding-left: 0;
            &--month {
              overflow: hidden;
              width: 120px;
              margin-top: 8px;
              text-align: center;
              display: flex;
              select {
                width: 100%;
                padding-right: 1em;
                padding-left: 10px;
                cursor: pointer;
                text-indent: 0.01px;
                text-overflow: ellipsis;
                border: 1px solid $light-gray;
                height: 50px;
                border-radius: 4px;
                outline: none;
                background: transparent;
                box-shadow: none;
                -webkit-appearance: none;
                appearance: none;
              }
              .card__month--icon {
                color: $icon-gray;
                position: absolute;
                left: 80px;
                top: 5px;
                font-size: 1.5rem;
                font-weight: 100;
                cursor: pointer;
              }
              .card__month--month {
                position: absolute;
                top: 15px;
                left: 130px;
              }
              .card__year--icon {
                color: $icon-gray;
                position: absolute;
                left: 80px;
                top: 65px;
                font-size: 1.5rem;
                font-weight: 100;
                cursor: pointer;
              }
              .card__year--month {
                position: absolute;
                top: 75px;
                left: 130px;
              }
            }

こんな感じです。
のアイコンをselect_tagの中に入れる方法がわからなかったので
最後の手段として、position: relative、absoluteで重ねました

-webkit-appearance: none;

これは

これをなくすためです

参考