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”类的元素，选择“禁用”类。

正确的CSS将是：

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

已禁用属性。您可以使用伪选择器:disabled（或者甚至使用属性选择器select[disabled=disabled]来获取它，但是使用伪类）。

请参阅jsFiddle

P.s：没有必要设置option样式，因为禁用select后，您无法单击打开它。只需选择样式。

Answer 2

现在你的CSS出了很多问题。

只需使用form而非.form来引用元素
您不希望select.disabled因为它引用了一个类，您希望select[disabled="disabled"]因为disabled不是一个类它是一个属性所以您想要使用括号作为一个类属性选择器。您还禁用了下拉菜单，因此我甚至不知道最后一个CSS语句的用途是什么，您似乎试图使该选项透明，但您不能这样做，因为下拉列表已被禁用。

由于您显然希望尽管已禁用该表单完全不透明，但请从上一个CSS选择器中删除该选项并进行上述更改，一切都应该有效。

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>

CSS：

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

JSFiddle：http://jsfiddle.net/HcaF2/

Answer 3

使用此插件http://uniformjs.com/很容易编辑rly cool

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

3 个答案: