CODEWITHSUNDEEP
htmlcss
frontender_amsterdam
frontender_amsterdam

Reputation: 336

Border color change on no input

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

Upvotes: 0

Views: 178

Answers (1)

George
George

Reputation: 36784

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

Upvotes: 3

Related Questions