Mark required fields with CSS

Is there some way that I can automatically shade required inputs with some css? I can do it manually of course by defining my own

.required class

. But is there some way that i can do it using the existing class? I see all required fields have a class

 validate['required','alpha'] 

or similar but I can't seem to affect that using input.validate.
I can pick the label.required_label and maybe select via the CSS heirarchy but is there a simpler or more direct way?

Regards

Nick

Hi Nick,

Have you tried

input.validate['required','alpha'] { . . . }

Bob

I thought that I had Bob with no success. But if you reckon that should work I will have another try tomorrow. Too late down under to try it now. 😲

Hi Nick,

This appears to work - for all validated inputs

input[class^='validate'] {
  background-color: blue !important;
}

and this for all required

input[class*='required'] {
  background-color: blue !important;
}

Bob

Great - works beautifully. Extended to select with

input[class*='required'],select[class*='required'] {
  background-color: #d5eeff !important;
}

Radios seem to be a bit more difficult as there is no associated required as far as I can see. The closest that I can get is that there is an associated label

required_label

that I can perhaps pick up. I have seen that somewhere but any better ideas, Bob?

Regards

Nick

Hi Nick,

This appears to catch them all

label.required_label ~ div {
    background-color: #d5eeff;
}

Bob