How Can I Center Text in a Select Box (A Chrome-Specific Solution)?

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 class="brush:php;toolbar:false"><option value="">(please select a state)</option>
<option></option>

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

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:

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

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.

The above is the detailed content of How Can I Center Text in a Select Box (A Chrome-Specific Solution)?. For more information, please follow other related articles on the PHP Chinese website!