Text Alignment for Select Box: A Partial Chrome-Only Solution

You may wish to center the text within a select box for aesthetic reasons or to improve accessibility. However, manually adding a text-align attribute to the select element in CSS may not work as expected.

Initial Attempts

One common approach is illustrated in the fiddle provided:

<pre>

<option value="">(please select a state)</option>
<option>

</select>
</pre>

<pre>select .lt { text-align: center; }
</pre>

Unfortunately, this technique is ineffective.

Chrome-Specific Solution

While a CSS-only solution for complete text alignment may not be possible across all browsers, there is a partial solution for Chrome:

<pre>select { width: 400px; text-align-last:center; }
</pre>

This method centers the selected option in the dropdown itself but not the unselected options. It is a step closer to full alignment but also a limitation to be aware of.