iPhone
Android
select

スマホでselectのテキストは左右中央にできるのか

More than 3 years have passed since last update.

ぐぐったらtext-align: -webkit-center;で左右中央にできるというのでやってみたけれど、iOS7・iOS8で効かなかった・・・

参考:http://www.yoheim.net/blog.php?q=20121007

bugfix

試行錯誤したら動いた。
※iPhoneと同じCSSだとAndroidで動かない(labelクリックしてもselectが開かない?)。

<label>
    <select>
        <option>選択1だよ〜</option>
        <option>選択2だよ〜</option>
        <option>選択3だよ〜</option>
    </select>
</label>
select { //Android
    text-align: center;
}

@media screen and (max-device-width: 480px) { //iPhone
    label {
        display: -webkit-box;
        display: box;
        box-pack:center;
        -webkit-box-pack:center;
        background-color: #fff;
        border: 1px solid #CCC;
        border-radius: 6px;
        cursor: pointer;
    }

    select {
        border: none;
    }
}

デモ:http://jsdo.it/Ituki/tsIQ