One thing that irks me is submitting a form that isn't complete and not having an indication of what is missing until after attempted submission.
We could color all the labels differently than the non-required, but I really wanted an asterisk in red to use just a little bit of contrast that is more relaxing to the user's eyes.
What can I say; I'm an Innovator...
Here is the result of styling individual labels using sudo selector ::after
...and here is a sample for various components that I put in the "Form Body" CSS:
/* dropdown select label selector */
/* calendar label selector */
/* textarea label selector */
/* checkbox label selector */
content: " *";
Hope that helps somebody. I think it looks great. The non-required fields are apparent now (I didn't screen shot the entire form) and the required fields are evident at a glance.
Lastly, I should mention that using pseudo selectors ALWAYS requires a "content" attribute - even if it is an empty string - or it won't show.
EDIT: Well, we need to tell the user what it means just incase they are from another planet, so I'll use ::after again, but on the whole div of my last element:
content: "* indicates required fields";
/* I couldn't achieve the placement result I wanted with right padding or margin, so I had to use width percentage */
BONUS: See the light grey line (#ddd) above "Project Discovered"? That's using the pseudo selector ::before!