Question

在搜索过去两个小时之后，我必须自掏腰包并问自己。

如何仅使用CSS（而不是Javascript）设置选择框的样式，以便在未进行选择时，不透明度设置为.5，但一旦选择，选择框是不透明度1？

我看到很多关于更改特定选项颜色的问题和答案，但我想影响整个选择框本身。看起来很简单：

还没有选择？不透明度：.5;

从下拉菜单中选择了什么？不透明度：1;

我似乎找不到触发器来知道是否选择了某些内容，是的，我尝试过使用：在选择框和选项上选中。

任何帮助都会很精彩，但我认为这是CSS本身的限制，如果没有Javascript干预就无法完成。谢谢你们！

Answer 1

这只能通过将required属性设置为您的选择来实现。它通过检查该选择的正确值来工作。如果选择空值的选项，则会将其标记为无效。您可以隐藏该选项并将其用作占位符。一旦用户做出选择，它就会消失。

select:invalid
{
  opacity: 0.5; 
}

<select required>
  <option value="" selected disabled hidden>Please select an option</option>
  <option>123</option>
  <option>123</option>
  <option>123</option>
</select>

纯CSS - 在进行选择时设置选择框的样式

1 个答案: