ChoromeとFirefoxで見え方の違うフォームの統一方法

selectがChoromeとFirefoxで見え方が違ったので統一する方法を調べてみた

Choromeだとかってにぼーだーらでぃうすが設定されてしまい、角丸が勝手ついてしまう。
それが嫌だったので、CSSででなんとかできないか考えてみた。
まずはselect自体のデフォルトのCSSをリセット。
appearance: none;でブラウザのデフォルトなどが消える。
で、label:beforeでselectの消えてしまった矢印を設定してあげる。その時に、select自体に、矢印の部分のスペースを右に開けてあげ、なおかつZ-indexを設定することで、矢印部分を押してもselectが選べるようにする。

select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select {
    padding-right: 20px;
    position: relative;
    z-index: 2;
    background: transparent;
}

label {
    position: relative;
    display: block;
    background: #fff;
}

label:before {
    content: "\f0dc";
    font-family: FontAwesome;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -10px;
    background: #fff;
    display: block;
}

   <label>
        <select>
            <option>選択肢1</option>
            <option>選択肢2</option>
            <option>選択肢3</option>
        </select>
    </label>