CSSのみで行うセレクトボックスのカスタマイズ

案件の関係でJSを使わずにCSSのみでセレクトボックスをカスタマイズしたのでその方法について。

こんなセレクトボックス

コードは以下

<div class="bg_select pie">
    <select name="prefecture" size="1" id="select_pre" class="select_box">
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13" selected>東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select>
</div>

IE8に角丸を対応させるためにpieが入ってます。

CSS(Sass)

.bg_select {
    @include border-radius(4px);
    background: #00b31e;
    background: -moz-linear-gradient(top center, #3bd255 0%, #00b31e 100%);
    background: -webkit-gradient(linear, center top, center bottom, from(#3bd255), to(#00b31e));
    background: linear-gradient(to bottom center, #3bd255 0%, #00b31e 100%);
    position: relative;
    z-index: 10;
    width: 398px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.select_box {
    padding: 11px 0 10px 15px;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    width: 430px;
    display: block;
    height: 50px;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    background: none;
    background-image: url(../img/arrow_btm.png);
    background-position: 340px center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 15;
    vertical-align: middle;
    line-height: 30px;
    box-sizing: border-box;
    border: none;
    option {
        color: #333;
    }
    &::-ms-expand {
        display: none;
    }
}

やっかいだったのはブラウザごとに挙動が変わってしまうこと。

具体的には

• IEやfirefoxでデフォルトの矢印が消えない←overflow: hidden;で対応（こちらの記事が参考になりました：CSSだけでをカスタマイズする）
• 文字色を変えるとIE9以下で選択しの文字も変わる（白文字にすると見えなくなってしまう）←optionの文字色を黒にするとIE9以下でのみ黒になったのでこれで対応
• ブラウザによって文字がボタンの中央にこない←解決策がわからなかったので先方に譲ってもらいました。

こんな感じです。
よかったら参考にしてください。