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>