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 月

그럼 어떻게해야합니까?

.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 月

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

-webkit-appearance: none;