selectタグには疑似要素が指定できない。

3389 ワード
scss Rails haml selectタグ Rails テキストリンク

結論

selectタグには疑似要素が指定できないのでdivタグでラップしました。

背景

selectタグを使用したときにデフォルトで表示される上下矢印ボタンをモダンな感じにしたかったのですが

デフォルトのボタンを消して、:before疑似要素で何とかしようとしていて詰まってしまいました。

解決方法

　こちらのサイト「フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する」にたどり着き、selectタグには疑似要素が指定できないことがわかりました。
　上記サイトでは、divタグで囲んでdivタブの疑似要素で表示させれば良いこともわかりましたので、次のサンプルコードを書きました。

sample.scss
    &__selectWrapper {
      position: relative;

      .select-form {
        -webkit-appearance: none;
        background-color: #fff;
        width: 100%;
        height: 46px;
        padding: 0 30px 0 15px;
        border-color: rgb(187, 187, 187);
      }
      &::before {
        content: '';
        position: absolute;
        right: 15px;
        top: 8px;
        width: 30px;
        height: 30px;
        background-color: red;
    }

　これでセレクトボックスの右側に赤い四角を表示させることができるようになりました。

　あとは良しなにfontawesomeなり画像ファイルなりに変更しましょう。