Html 如何在Chrome浏览器中更改元素的外观？

我有以下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>

基于HTML，您的CSS.form select.disabled是错误的

它正在寻找以下方面： 类为“form”的任何元素，选择类为“disabled”的元素

正确的css应该是：

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

禁用是一个属性。您可以使用pseudo-selector:disabled或者甚至使用select[disabled=disabled]属性选择器来获得它，但是可以使用pseudo类

看

---

注意：不需要设置样式选项，因为select已禁用，所以您无法单击以打开它。只需相应地选择样式

你的CSS现在有很多问题

只需使用form而不是.form来引用元素 您不想要select.disabled，因为它引用了一个类，您想要select[disabled=disabled]，因为disabled不是一个类，而是一个属性，所以您想要使用括号作为属性选择器。您还禁用了下拉菜单，所以我甚至不知道最后一个CSS语句的意义是什么，您似乎试图使选项透明，但您不能，因为下拉菜单已禁用。 由于您显然希望在禁用的情况下使表单完全不透明，请从上一个CSS选择器中删除该选项，并进行上述更改，所有操作都应正常工作

HTML:

---

jshiddle:

使用这个插件编辑起来很容易

他不想设计他的下拉菜单，请仔细阅读他的问题

<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>

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