Border color change on no input

Question

I have a code and I want, if there is no input, the border color is blue. I have this:

 <fieldset>
    <label>Number</label>
    <input type="number" value="1" max="10" min="1" step="1" required>
</fieldset>

and

input:out-of-range {
 border: solid red 1px;
 }
input[value=""] {
border: solid purple 1px;
}

I want the number box to be purple when its empty

Answer 1

You can't use an attribute selector in that way. Changing an <input> s value will modify the property, not the attribute .

Since you have the required attribute applied to your <input> however, you can make use of the :invalid pseudo selector:

input{
    border:1px solid red;
}
input:invalid {
    border: 1px solid purple;
}

JSFiddle

Documentation

• :invalid