使用CSS检测是否< option>已选中< select>

5q4ezhmt  于 2023-11-19  发布在  其他
关注(0)|答案(3)|浏览(132)

我使用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;
}

ckocjqey

ckocjqey1#

是的,:checked伪类也针对<option>标记。
范例:

option:checked { display:none; }

字符串
资料来源:
http://www.w3.org/TR/selectors/#checked

编辑:

如果你想在<select>之外定位一个元素,可以通过一个hacky的方式来操作:valid 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>

的数据

2w2cym1i

2w2cym1i2#

由于select元素没有multiple属性,因此不可能不选择其中的选项。(是的,没有内容和值的选项仍然是一个选项,可以选择,并且默认情况下处于选中状态)。
:checked属性将应用于<option>元素,但您不能使用它来定位<select>,因为CSS has no parent selector

syqv5f0l

syqv5f0l3#

我设法使用:has解决了你的问题,同时选择了一个空值:not(:checked)的内部option
请注意,它在Firefox中不工作,因为它还不支持:has CSS伪类。

div {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

/** The magic is here **/
select:has(option[value=""]:not(:checked)) + label {
  font-weight: bold;
  color: red;
}

label { order: 1 }
select { order: 2 }

个字符

相关问题