mania-ku

何か作りたいプログラマ未満。

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

できるのかな?とtext-align: center;を試しましたが、動かず。

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

bugfix

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

//HTML
<label>
    <select>
        <option>選択1だよ〜</option>
        <option>選択2だよ〜</option>
        <option>選択3だよ〜</option>
    </select>
</label>


//CSS
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;
    }
}

【Advent calendar】iPhone/iPadでlabelを使う方法

アドベントカレンダーの時期に、毎日ブログ書こうかなーと思っていたら、旦那さんが掃除中にMac Book Proを割ってしまいました。
しょうがないので?旦那さんにAir与えてみて(クリスマスプレゼント)、修理中はそれを借りることにします。(英字キーボード使いにくい…)
なるべく20日間毎日更新できるように頑張ります!そのため、題材は自由です。

1日目の今日は「iPhone/iPadでlabelを使う方法」です。

私はフォームにはなるべくlabelをつけて、押しやすくしたい方です。ユーザビリティってやつです。
ただiPhone/iPadではそのままでは動きません。
ぐぐったところ、2つ解決策があるようです。

イベントを追加

labelにonclick=””を追加します。

<label for="checkbox" onclick=""></label>

CSSを追加

labelのCSSにcursor: pointer;を追加します。こちらは今回の記事を書こうとして、もう一度調べたら見つけたもの。
こちらのほうだと一箇所で解決するので、簡単で良さそうです。
普段使うreset.cssやnormalize.cssに追加しておいてもいいかもしれませんね。

label {
	cursor: pointer;
}

なお、この記事はlabelタグを設定した領域が、iPhoneでタップしても反応しない件を参考に書きました。
明日はdisplay: box内で改行する方法について書く予定です。
see you next 😉