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

Your code is already working Edzo.http://jsfiddle.net/no39s521/ or You want it on form submit?please clear this point — Mr7-itsurdeveloper, Sep 30 '14 at 07:56
In JSfiddle it works, in that when there is no input, it shows a red border. Is the bit that isn't working the out of range bit? — Bowersbros, Sep 30 '14 at 07:56
I want that the number box shows a purple border when it's empty and not red — frontender_amsterdam, Sep 30 '14 at 07:59

score 3 · Accepted Answer · edited May 23 '17 at 12:05

3

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;
}

Documentation

edited May 23 '17 at 12:05

Community

answered Sep 30 '14 at 07:59

George

Thanks!! I just want now that when it's in range there is no color. Can i do that? – frontender_amsterdam Sep 30 '14 at 08:05
In this case, anything that is out of range is seen as invalid, so `:out-of-range` will produce similar results. What do you imagine is valid, but out of range? – George Sep 30 '14 at 08:08

1 Answers1