html - 如何更改 Chrome 浏览器中 <select> 元素的外观？

Question

我有以下 CSS:

.form input.disabled,
.form select.disabled,
.form textarea.disabled {
  color: #A9A9A9;
  border: 1px solid #adcede;
  opacity: 0.5;
}
.form select.disabled option {
  color: #000;
  opacity: 1;
}

但它似乎不适用于我的 HTML:

<form>
<select data-ng-disabled="!option.selectedSubject" 
data-ng-model="option.selectedContentType" 
data-ng-options="item.id as item.name for item in option.contentTypes" 
class="ng-pristine ng-valid" 
disabled="disabled">
<option style="display: none" value="" class="">Select Content Type</option></select>
</form>

Answer 1

根据您的 HTML，您的 CSS .form select.disabled 是错误的。

它正在寻找以下内容: 任何具有“form”类的元素，选择具有“disabled”类的元素。

正确的 CSS 应该是:

form select:disabled {
  color: #A9A9A9;
  border: 1px solid #adcede;
  opacity: 0.5;
}

Disabled 是一个属性。您可以通过使用伪选择器 :disabled 来获取它(或者甚至使用 select[disabled=disabled] ，它是属性选择器，但请改用伪类)。

参见 jsFiddle

P.s: 不需要设置 option 的样式，因为 select 被禁用，你不能点击打开它。只需相应地选择样式即可。