CSS change style base on valid input

Ask a question
1

I’m new to CSS and I will appreciate any help.

I’m trying to style the asterisk * inside the span element of a required element based on the input:valid property.

<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName">
    First Name
    <span class="ddff" style="color:red;">*</span>
</label>

I tried to do :

input:valid .ddff {
    color: palegreen;
}

But it’s not working.

I want to change the color of the * from red to green if the input is valid or keep it red otherwise.

How can I achieve it using CSS?

Thanks!

offer bounty
add comment

0 Answer

Your Answer