Question

当:has()选择器变为现实时，这当然是可能的，但有没有办法选择至少一个选项的<select>。也许使用[value=""]选择器？

我不会问这是不是因为选择选项改变了选择的值，所以我认为可能有一条路可以通过这条路径。有什么想法吗？

示例：

.select[value] {
  border: 2px solid red;
}

<select multiple="multiple">
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>

Answer 1

您可以使用required元素上的select属性并在CSS中使用:valid和:invalid伪类来使其工作。

我在下面做了一个演示。使用单选select的方法有点hacky，因为你必须插入一个空的option，但多选select的效果相当不错。在Chrome，FF和IE11中测试过。

select:invalid {
	border: solid 2px red;
}

select:invalid + label::after {
  content: "(Please make a selection)";
  padding-left: 0.5em;
  font-style: italic;
}

select:valid {
	border: solid 2px green;
}

label {
  display: block;
  margin-bottom: 1rem;
}

<select id="single" required>
	<option selected disabled></option>
	<option>Blue</option>
	<option>Red</option>
</select>
<label for="single">Single Choice</label>

<select id="multiple" required multiple>
	<option>Blue</option>
	<option>Red</option>
</select>
<label for="multiple">Multiple Choice</label>

Answer 2

Selectors 3，Selectors 4，CSS UI 3和CSS UI 4都不提供任何基于任何特定条件匹配<select>元素的伪类。接近的唯一伪类是:checked，它适用于<option>元素。

因此，:has()可能与select[multiple]:has(> :checked)一样微不足道。除此之外，没有基于选择器的替代方案。虽然<select>确实具有DOM .value属性，但它没有value属性（因为<select>的选择已经通过{{1}表达selected）上的属性，因此您无法使用属性选择器。

如何选择至少选择了一个选项的css多个选择标签？

2 个答案: