【メモ】JS依存なしのオリジナルデザインセレクトメニュー

いままでセレクトメニューのオリジナルデザインはcustomSelect.jsを使っておりましたが、Railsのバリデーションでちょいちょい問題がでたりしたので、いっそのことJSに依存しない方法に変えます（いまさらｗ）

サンプルコードは以下

sample.html

<div class="selectOuterCase">
  <select id='test'>
    <option>選択してください</option>
    <option>大変興味がある大変興味がある大変興味がある</option>
    <option>少し興味がある</option>
    <option>興味なし</option>
  </select>
</div>

sample.scss

.selectOuterCase{
  border: 1px solid #DDD;
  border-radius: 6px;
  position: relative;
  select{
    width: 100%;
    font-size: 16px;
    color: #333;
    background-color: inherit;
    border: none;
    border-radius: 6px;
    padding: 8px 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
  }
  &:after{
    height: 100%;
    font-size: 20px;
    color: #AAA;
    box-sizing: border-box;
    content: '▼';
    background-color: #FFF;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 6px 5px 0;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
  }
}

角丸や文字サイズ、▼の大きさ、クリアランス等は適宜調整して使う感じ。

確認環境
Firefox Quantum 61.0.1
iPhone5s iOS10.3
Google Chrome 67.0.3396.99
Edge 41.16299.248.0 win10（virtualbox）