2012/10/15更新

[CSS] セレクトボックスの内容をセンタリング表示する為のwebkit用のスタイル

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日は、セレクトボックスの内容を中央表示するためのwebkit用CSSについて書きたいと思います。ライトなネタです(・∀・)

画像


セレクトボックスの内容がwebkit系ブラウザでは中央寄せにならない

中央寄せのスタイルとして思いつくのが、「text-align:center」ですが、 これをselect要素に設定しても、webkit系ブラウザ(Safari,Chrome,iPhone,Android)では中央寄せになりません。
(Firefoxとかのブラウザであれば中央寄せになります。)

例)

ソースコード)
<select style="text-align:center;">
  <option value="orange">オレンジ</option>
  <option value="melon">メロン</option>
  <option value="apple">リンゴ</option>
</select>



そんなWebkit系ブラウザでselect要素の中身を中央寄せする

個人的には中央寄せにするUIじゃなくても良いのでは?と言うのですが、 中央寄せにしたい場合には、「text-align: -webkit-center;」を設定すると、できます。

例)

ソースコード)
<select style="text-align:-webkit-center;">
  <option value="orange">オレンジ</option>
  <option value="melon">メロン</option>
  <option value="apple">リンゴ</option>
</select>



最後に

このCSSは知らなかったです。最近はいろんなものに、ベンダープレフィックスが付いてるんですね。

簡単な内容ですが、以上でーす(*゚▽゚)ノ





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。