Streaming live at 10am (PST)

Target and style Required Field Notification in Forms

Hey guys. I’m trying to find a way to target and style the required form field notification (not sure if that’s what you call it) because it looks terrible on iOS devices and I would love to make it consistent design/style across browsers. Also can I edit any of the text?

image

image

I would like to be able to do something like this instead:

Since the forms use the boolean required tag, you should be able to style the :required psuedo class on your form fields:

input:required {
  border: 1px solid red;
}

Edit: If you’re wanting to have a separate element or helper text, just use either ::before or ::after along with the style of your desired helper element.

Edit 2: Here’s the link to the CSS-Tricks article that goes over the psuedo class but I wasn’t able to find a direct answer on whether this overrides already established browser styles. You may need a rule that clears all the pre-used styles first before applying your own, but that should get you started.

Thanks @mikeyevin. I’ll give it a try and report back.