Jump to content
Nic727

changing color of required input when submitted

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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…

field.png

 

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 by Nic727

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×