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

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

こんなの作りたい〜〜〜
<img width="171" alt="スクリーンショット 2019-06-29 18.51.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400567/01624f0c-2b3d-6017-ce41-488db9b44839.png">


##:point_up_tone1:JSを使わずにhamlとscssだけでできる:bangbang:

```
.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 月
````
↑これでもできるけど冗長になってしまうのでこの好まれない:frowning2:

##じゃあどうやればいいの:robot:
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で書けばいい感じに短く簡単にできる:relaxed:

さらに、


controllerで
```
@card.month = params[:card][:month]
```
で値をとってこれる:ok_hand_tone1:


####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;
              }
            }

```

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


```
-webkit-appearance: none;
```

これは
<img width="23" alt="スクリーンショット 2019-06-29 18.53.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400567/d4ab96fe-ec7d-8938-9aa8-36cd3fcadf8c.png">

これをなくすためです:raised_hand_tone1:



#####参考
http://totutotu.hatenablog.com/entry/2014/10/31/%E3%80%90Rails%E3%80%91form%E3%81%AEselect%E3%81%AE%E7%B0%A1%E5%8D%98%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9_-_%E8%A1%A8%E7%A4%BA%E3%81%A8%E5%80%A4%E3%81%AE%E5%8F%96%E5%BE%97%E3%81%AE%E4%BB%95%E6%96%B9