在 CSS 选择器中使用通配符来设置值存在时的样式

Question

我试图仅在该元素具有 value 属性时设置该元素的样式。

value 属性是可变的（它是一个日期），但它是 "no value" 和 "has value" 之间唯一需要改变样式的东西。

是否可以在 CSS 选择器中使用通配符来确定值属性是否存在？例如：

HTML

<input class="thing" value="variable-something">...</input>
<input class="thing">...</input>

CSS

.thing[value="*"] {
   ...
}
OR
.thing[value=*] {
   ...
}

我试过这个解决方案，但使用 " 会查找特定的字符串。执行 .thing[value=*] 是无效的，不会编译。

有什么建议吗？

Answer 1

您可以使用下面的代码

input[value]{background: red;}

<input type="text">
<input type="text" value="">

Answer 2

<input type="text" value="">
<input type="text">

input[value]{
  background: #ccc;
}

Use a wildcard in CSS selector to style when value is present