Question

在使用css的最新浏览器中，当选择禁用选项时，是否可以将select元素的颜色设置为不同？让我用一个例子来解释

<select>
    <option selected="selected" disabled="disabled" value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option value="3">Val 3</option>
</select>

我正在寻找类似

的解决方案

select {
    color: #000
}
select option[disabled]{
    color: #ccc;
}
select when disabled option is selected {
    color: #ccc
}

jsfiddle：https://jsfiddle.net/xsdg2sq9/

Answer 1

到目前为止，无法使用纯css到达父元素。

访问CSS Selectors

我建议你使用java Script＆amp; amp; jQuery的。

使用jQuery中的.parent()，您可以根据需要设置选择样式。

如果您需要jQuery代码，请回复我。

祝你好运：）

Answer 2

仅供参考：CSS :disabled Selector：

select{
	width:250px;
    padding:15px;
    font-weight:600;
    font-size:24px;
}
select option:disabled {
    color: #CCC;
}
select[multiple=multiple]:disabled {
    background: #ffff00;
}

select {
    color: blue;
}
select option:disabled{
    color: yellow;
}
select option[selected=selected]:disabled {
    color: #000;
    background: #CCC;
}

<form action="">

<select>
    <option selected="selected" disabled="disabled" value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option value="3">Val 3</option>
</select>


<select>
    <option disabled="disabled" value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option selected="selected" value="3">Val 3</option>
</select>

<select>
    <option disabled="disabled" value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option disabled="disabled" selected="selected" value="3">Val 3</option>
    <option value="3">Val 3</option>
    <option disabled="disabled" value="4">Val 4</option>
    <option selected="selected" value="5">Val 5</option>
</select>

</form>

仅使用css选择禁用时选择的特定颜色选项？

2 个答案: