我使用 input:not(:placeholder-shown)
确定值是否在输入字段中。
是否有一些 CSS 方法来检查 <option />
是否存在?已被选中 <select>
元素?
如果选择了一个选项,我想在选择下拉列表之后立即设置标签的样式。
这是一个例子:
<select class="form-control">
<option></option>
<option value="1">One</option>
</select>
<label>Pick One</label>
如果选择了一个选项(带有值),这是我想用来操作的 CSS。
select.form-control:checked ~ label{
color: red;
}
最佳答案
是的,:checked
伪类也针对 <option>
标签。
例子:
option:checked { display:none; }
来源:
编辑:
如果你想定位一个元素在你的<select>
之外 , 它可以通过操纵 :valid
以一种 hacky 的方式完成css伪类。请注意 required
必须为 <select>
启用属性标记注册为有效/无效。
例子:
body {
background-color: #fff;
}
select:valid ~ label {
background-color: red;
}
<select required>
<option value="" selected>Please select an option</option>
<option>1</option>
<option>2</option>
</select>
<label>Please select an option</label>
关于html - 使用 CSS 检测 <select> 中是否选择了 <option>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55085140/