html - 使用 CSS 将禁用的选择居中对齐

Question

我有一个包含两个字段的登录页面:

<select id="operatore" name="operator">
    <option disabled selected>Operator</option>
    <option>John</option>
    <option>Jennifer</option>
    <option>Carl</option>
</select> 
<input type="password" placeholder="Password" id="search_field" readonly>

我希望所有文本都居中显示。在 Firefox 中一切正常。但是在 Chrome 中，即使样式检查器没有取消样式，书面的“运算符”也会出现在左侧，正如您从图像中看到的那样:

在三星平板原生的上网应用中，文字“Operator”居中显示，但占位符“password”出现在左侧。为什么？我怎样才能解决所有这些问题？

HERE是完整的代码。

Answer 1

你可以给它一个文本缩进，比如
text-indent: 40px;
这不会使它居中对齐，但它会将它移到中间
顺便说一句，有一种更好的方法可以为选择

<option style="display: none;" value="">Operator</option>

这样就不会出现在下拉列表中了