user1486133 user1486133 - 1 month ago 6
CSS Question

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

I am trying to style an element only when that element has a value attribute.

The value attribute is variable (it's a date), but it's the only thing that changes between "no value" and "has value" which I need to style differently.

Is it possible to use a wildcard in the CSS selector ascertain whether the value attribute is present? E.g:

HTML

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


CSS

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


I've tried this solution but use of the
"
makes it look for a specific string. Doing
.thing[value=*]
is invalid and won't compile.

Any advice?

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

input[value]{
  background: #ccc;
}

Try it yourself https://jsfiddle.net/55rjf0y8/