My class is not applying

[schwim]

Hi there everyone!

I’m trying to make my form a bit more friendly for users by applying an error class to the elements that they had a problem with so I created a very simple coError class dictating a background color and am applying it to the elements in question. The issue I’m having is that it’s not applying the background color. The boxes are remaining standard color.

Here’s the page in question(with the elements already having the applied class):

https://wheeltastic.com/errorbg.html

Could someone help me out with what I’ve done wrong?

Thanks for your time!

[chrisofarabia]

Can you point at a specific element that you think should have the class applied? The ones I’ve looked at so far don’t show the class you mention, and I can’t see the corresponding CSS. How is the class being applied? JS?

[concept_core]

Hope this helps :

Background color in input and text fields

[SamA74]

I don’t see the class on the input elements, how are you trying to apply the class?
You can use the invalid pseudo class for this if you give the inputs the required attribute.

[schwim]

I’m very sorry for not explaining my issue further.

On my input elements with issues, I’ve applied: class=“coError”

In my style, I’ve included:

.coError{
	background-color : #f7a8a8;
}

[SamA74]

OK I see it now in View Source, I guess it does not show in Inspect because it’s invalid, you have the class attribute twice. It should only appear once, but can contain more than one class separated by a space.

<input type="text" value="" placeholder="" id="first_name" name="first_name" class="input-text coError">

Though I think the class input-text is possibly a waste of code since the selector input[type=text] can be used for that.

[SamA74]

@SamA74

You can use the invalid pseudo class for this if you give the inputs the required attribute.

<input type="text" id="first_name" name="first_name" required>

input:invalid {
     background-color : #f7a8a8;
}

[schwim]

Thank you very much for your help!

EDIT: Scratch that, I applied it incorrectly again

[ronpat]

@schwim

EDIT: Scratch that, I applied it incorrectly again

If the issue is not solved, please update your test page and explain how the change of background-color is being applied, or not being applied again.

Good places to start troubleshooting HTML and CSS are the validators. Significant problems in the structure of the HTML can prevent the CSS and/or JavaScript from being applied as expected.

HTML:
https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fwheeltastic.com%2Ferrorbg.html

CSS:
https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwheeltastic.com%2Ferrorbg.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en