[解決済み] セレクトボックスのテキストを中央揃えにすることは可能ですか？

質問

こんなことをやってみました。 http://jsfiddle.net/ilyaD/KGcC3/

HTMLです。

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

CSSです。

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

ご覧の通り、うまくいきません。 セレクトボックスのテキストを中央揃えにするCSSだけの方法はないのでしょうか？

どのように解決するのですか？

プレーンなCSSでは不可能ですし、完全なクロスブラウザー対応にすることもできませんね。

しかし、jQueryプラグインを使用すれば、ドロップダウンのスタイルを変更することができます。

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

このプラグインは select 要素を作成し span 要素などをオンザフライで表示し、カスタムドロップダウンリストのスタイルを表示します。スパンなどのスタイルを変更することで、項目を中央揃えにすることができると確信しています。