changing color of required input when submitted

[Nic727]

Hi,

I have some input field which are required and when submitting the borders are red. That's ok, but how can I customize how it shows instead of being browser default? Is it possible with CSS?

Thank you

[Ingolme]

You can use the CSS :invalid pseudo-class as in the following example:

input[type=text]:invalid {
  border: 1px solid blue;
}

 

[Nic727]

37 minutes ago, Ingolme said:

You can use the CSS :invalid pseudo-class as in the following example: 

input[type=text]:invalid {
  border: 1px solid blue;
}

 

Doesn't work. For some reasons it makes all my required field having my :invalid styles and if I try to submit empty field, the default borders are still appearing. I'm in MS Edge.

[Ingolme]

The :invalid selector is the one that you have to use for form fields that had an error. The default border is probably using the outline property or box-shadow property, try setting those to "none". Don't just copy the example code I gave, you have to use the :invalid pseudo-class along with a selector to the specific element you want to change. You also should experiment with different CSS properties to see which one overrides the default style.

[Nic727]

33 minutes ago, Ingolme said:

The :invalid selector is the one that you have to use for form fields that had an error. The default border is probably using the outline property or box-shadow property, try setting those to "none". Don't just copy the example code I gave, you have to use the :invalid pseudo-class along with a selector to the specific element you want to change. You also should experiment with different CSS properties to see which one overrides the default style.

Well… I found that https://css-tricks.com/almanac/selectors/i/invalid/

Look like it show my empty required field as invalid even if I didn't submit yet. Look like it will be better to use JavaScript for that.

My topic should be moved to Javascript…

 

From what I saw from other contact form out there is that they don't have the "required" in the input and they only have some JS function to check if it's empty. A good idea for customization, but I think that the "required" option is important… But the "required" option prevent the form from submitting, so can't work with ajax text.

Edited June 14, 2018 by Nic727

[dsonesuk]

Its supposed to highlight in red while empty, it requires a value, once a value or the correct type of value, is entered you can style it to whatever colour you want using :valid, to a colour green border for instance.

[Nic727]

Thank you