是否可以在选择框中将文本居中？

Question

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方式将文本置于选择框中？

Answer 1

恐怕普通的CSS不可能做到这一点，并且不可能完全兼容跨浏览器。

该插件隐藏select元素，并动态创建span元素等以显示自定义下拉列表样式。我非常有信心您将能够更改跨度等的样式以使项目居中对齐。