Changing color of input type date on valid input

Question

So for my regular input type="text" field I use the following code to change the color to green, only after something has been typed in and it is valid:

input[type="text"]:not(:placeholder-shown):valid {
 background-color: green;
}

Is there any way to the same for an input type="date" field?

 <input type="date" class="form-control calender-black" name="dbfield52">

The problem seems to be it already is valid since it shows: DD-MM-YYYY as standard value.

Is there a way to do this with css only selectors? Or else maybe with javascript.

Answer 1

You can do this easily using :valid css pseudo-class like:

input[type="date"]:valid {
  border: 2px solid green;
}

Demo:
_{( Just select a value from control and it will add a green border to the date control )}

 /* This is just used to set some styling */ input[type="date"] { padding: .375rem.75rem;font-size: 1rem;line-height: 1.5;border-radius: .25rem;border: 2px solid #ced4da; } input[type="date"]:focus { outline: 0; } /* This is the important part */ input[type="date"]:valid { border: 2px solid green; }

 <form> <input type="date" class="form-control calender-black" name="dbfield52" required /><br/> <p> <button>Submit</button> </p> </form>

Answer 2

You have to set the input as required in order for validation to work:

 input[type="date"]:valid { background-color: green; }

 <input type="date" class="form-control calender-black" name="dbfield52" required>