将禁用的选择居中对齐 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" 出现在左侧，即使样式检查器没有取消样式，正如您从图像中看到的那样：

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

HERE 是完整的 CODE.

Answer 1

取自：Is it possible to center text in select box?

恐怕这对于普通 CSS 是不可能的，并且不可能完全 cross-browser 兼容。

但是，使用 jQuery 插件，您可以设置下拉菜单的样式：

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

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

Answer 2

您无法真正自定义 <select> 或 <option>。唯一的方法 (cross-browser) 是手动创建一个带有 div 的下拉列表和 css/js 来创建类似的东西。

Answer 3

好的，我相信我已经解决了您的运营商问题。

这里是稍微改动过的代码。

form input {/*ADDED*/
  width: 250px;
}

form input, #operatore {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);

  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
 padding-left: 90px;/*ADDED*/
 padding-right: 80px;/*ADDED*/
  /*TOOK AWAY width: 250px; PROPERTY*/
  display: block;
  text-align: center;
  font-size: 18px;
  color: white;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
}

出于某些奇怪的原因，在 Chrome 选择器表单输入中，#operatore 正在禁用对（表单）选择器选项所做的任何其他更改。此外，如果我要添加一个额外的选择器，例如：#operatore {someCSS}，（选择器）表单输入，#operatore 仍将优先于该选择器，我也使用了 !important。无论如何，您必须使用 padding-left 和 padding-right.

手动对齐文本

Answer 4

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

创建占位符

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

这样它就不会出现在 drop-down

将禁用的选择居中对齐 CSS

Align center a disabled selection with CSS

html

css

placeholder