我使用input:not(:placeholder-shown)
来确定一个值是否在输入字段中。
有没有CSS方法来检查<select>
元素中是否选择了<option />
?
如果已选择某个选项,我想在选择选项后立即设置标签标记的样式。
下面是一个示例:
<select class="form-control">
<option></option>
<option value="1">One</option>
</select>
<label>Pick One</label>
字符串
下面是我想用来操作的CSS,如果一个选项(带值)已被选中。
select.form-control:checked ~ label{
color: red;
}
型
3条答案
按热度按时间ckocjqey1#
是的,
:checked
伪类也针对<option>
标记。范例:
字符串
资料来源:
http://www.w3.org/TR/selectors/#checked
编辑:
如果你想在
<select>
之外定位一个元素,可以通过一个hacky的方式来操作:valid
css伪类。注意,required
属性必须被启用,<select>
标签才能注册为有效/无效。范例:
的数据
2w2cym1i2#
由于
select
元素没有multiple
属性,因此不可能不选择其中的选项。(是的,没有内容和值的选项仍然是一个选项,可以选择,并且默认情况下处于选中状态)。:checked
属性将应用于<option>
元素,但您不能使用它来定位<select>
,因为CSS has no parent selector。syqv5f0l3#
我设法使用
:has
解决了你的问题,同时选择了一个空值:not(:checked)
的内部option
。请注意,它在Firefox中不工作,因为它还不支持
:has
CSS伪类。个字符