Html CSS伪选择器类似于：有效或：选中选择标记？

如果

select

标记有一个已选择的值，我试图找到一种非JavaScript的方式来设计它的样式

例如，如果我有以下标记：

<select>
  <option value="">Select a widget...</option>
  <option value="1">Widget 1</option>
</select>

选择一个小部件。。。
小部件1

是否有一个CSS选择器，我可以用来告诉选择标记的值何时不为空？

根据：

required属性是一个布尔属性。指定后，用户需要在提交表单之前选择一个值

约束验证：如果元素指定了其必需属性，并且选择元素的选项列表中没有选项元素的selectedness设置为true，或select元素的选项列表中selectedness设置为true的唯一选项元素是占位符标签选项，则元素丢失

如果select元素的选项列表（如果有）中第一个option元素的值是空字符串，并且该option元素的父节点是select元素（而不是optgroup元素），那么该选项就是select元素的占位符标签选项

重点是我的

上述语句意味着，只有当用户选择一个值时，具有

required

属性的

select

元素才会变得

有效。在此之前，它将继续处于
无效
状态


：valid
，
：invalid
伪选择器本身可以帮助设置
select
元素的样式，这取决于是否选择了值，但取决于几个因素。详情如下:


通过选择，您的意思是检查是否选择了有效值，而不仅仅是任何选择
无效或空值（在本例中为“选择小部件…”）具有
value=”“
，是Select元素下的第一个选项
select
元素是一个强制元素-这意味着，我们可以向它添加
required
属性

根据您的问题陈述，我认为您的场景满足上述所有因素


选择{
边框：2件纯蓝；
大纲：无；
}
选择：有效{
边框：2倍纯绿；
大纲：无；
}

选择一个小部件。。。
小部件1
工作起来很有魅力！我误读了
：valid
文档，认为它们不适用于
select
输入。谢谢