html - 使用 CSS 检测 <select> 中是否选择了 <option>

标签 html css css-selectors

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

来源:

http://www.w3.org/TR/selectors/#checked

编辑:

如果你想定位一个元素在你的<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/

相关文章:

javascript - 使用 Javascript 更改 TH 中的文本

javascript - 如何动态调整自定义 CSS 属性?

css - 需要向包含 "Save"按钮的 <p> 添加一些 CSS,选择器会是什么样子?

javascript - 获取 innerHTML 值 - 仅纯文本

javascript - 如何停止浏览器建议字段输入?

javascript - 收听服务响应 JavaScript

css - html 元素的纵横比(在 img 标签内)

javascript - 根据鼠标位置滚动导航栏不流畅需要改进

css - 您如何对相似的第 n 个子选择器进行分组?

python - 即使使用 Selenium 和 Python 有多个具有相同类名的元素,如何通过类名识别元素