使用 CSS 将禁用的选择居中对齐答案

【问题标题】：Align center a disabled selection with CSS使用 CSS 将禁用的选择居中对齐
【发布时间】：2016-01-18 05:42:40
【问题描述】：

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

<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 中，即使样式检查器没有取消样式，书写的“操作员”也会出现在左侧，如图所示：

在三星平板上网本机应用程序中，书写的“操作员”出现在中间，但占位符“密码”出现在左侧。为什么？我该如何解决所有这些问题？

HERE 是完整的CODE。

【问题讨论】：

Is it possible to center text in select box?的可能重复

标签： html css placeholder

【解决方案1】：

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

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

这样它就不会出现在下拉菜单中

【讨论】：

谢谢，但是在其他浏览器中缩进变大了。所以我使用了 Chrome 的特定目标：@supports (-webkit-appearance:none) { #operatore { text-indent: 65px; } }

【解决方案2】：

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

恐怕这对于纯 CSS 是不可能的，也不可能完全跨浏览器兼容。

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

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

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

【讨论】：

【解决方案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 手动对齐文本。

【讨论】：

谢谢，但是由于选择框变小了，所以并没有解决问题

【解决方案4】：

您无法真正自定义 <select> 或 <option>。唯一的方法（跨浏览器）是手动创建一个带有 div 和 css/js 的下拉菜单来创建类似的东西。

【讨论】：