CSS change style base on valid input

Question

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!

In your span you have an inline css. It overwrite your css rule, so you can remove it or set your color into css like this input:valid .ddff { color: palegreen !important } — law_81
– law_81, Commented May 14, 2019 at 7:17

Lalji Tadhani · Accepted Answer · 2019-05-14 07:15:21Z

1

your css is inline, try with !important

input:valid + label .ddff {
      color: palegreen !important;
 }

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

answered May 14, 2019 at 7:15

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

xmaster Over a year ago

please don't use !important

Lalji Tadhani Over a year ago

@xmastertje inline CSS how can overwrite?

04FS Over a year ago

The initial red color of the span should not be inline here in the first place, and then no !important is needed either.

Salvation Over a year ago

Thank you!! I removed the inline style and the !important also and it works great! I can't vote for you @04FS because I newbie and I dont have that option here. Thanks for the tip.

Sepehr Amirkiaee · Accepted Answer · 2019-05-14 08:08:31Z

1

You can use :valid and :invalid selector for form elements with limitation such as required.

Try this:

input[required]:invalid + label:after{content:"*";color:red}
input[required]:valid + label:after{content:"*";color:green}

<input placeholder="Placeholder" required />
<label> First Name</label>

edited May 14, 2019 at 8:08

answered May 14, 2019 at 7:49

Sepehr Amirkiaee

1325 bronze badges

4 Comments

Rachel Gallen Over a year ago

this is the best answer, but the input should have the someValue as placeholder text

Sepehr Amirkiaee Over a year ago

You can add default value as you want. If add value, input will be :valid at first

Rachel Gallen Over a year ago

It's not ideal to start off with the asterisk showing as valid. Placeholder text is recommended if user input is required

Sepehr Amirkiaee Over a year ago

Use placeholder instead

Imen Krichen · Accepted Answer · 2019-05-14 07:18:31Z

0

it can works because .ddff is not an input child

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

.ddff{
      color: red;
}
input:valid + label .ddff {
      color: green;
 }

input:invalid +label .ddff {
      color: red;
 }

answered May 14, 2019 at 7:18

Imen Krichen

514 bronze badges

1 Comment

Salvation Over a year ago

Thank you very much for your answer. The first comment helped me to solve this issue.

Pingolin · Accepted Answer · 2019-05-14 07:22:43Z

0

Your CSS selector is not correct, you have to use the Adjacent sibling combinator:

input + label .ddff {
    color: red;
}

input:valid + label .ddff {
    color: palegreen;
}

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

answered May 14, 2019 at 7:22

Pingolin

3,4677 gold badges29 silver badges43 bronze badges

Comments

HAPPY SINGH · Accepted Answer · 2019-05-14 07:25:40Z

0

can you please try:

CSS:

input:valid + label span.ddff {
      color: palegreen !important;
 }

Note: You can use an inline CSS. please overwrite your CSS.

answered May 14, 2019 at 7:25

HAPPY SINGH

5764 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS change style base on valid input

5 Answers 5

4 Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related