[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は知らなかったです。最近はいろんなものに、ベンダープレフィックスが付いてるんですね。

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