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:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="">(please select a state)</option>
<option>

Copy after login

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!