Styling the invalid state of input fields

At a glance

Hi people, I consider myself to know CSS quite well, but I've just started using Webstudio. So far I am enjoying using it, but I keep getting stuck with small things which I could solve quickly if I was hand-coding.

For instance, I want to style the invalid state of the input fields, and when I do the required fields get this state initially since they are empty, but required.

If I were hand coding I would do something like:

Plain Text

input:invalid:not(:focus):not(:placeholder-shown) {
  border: 2px solid red;
  background-color: #ffdddd;
}

But I can't write my own selectors in Webstudio. How do people handle this kind of situation?

2 comments

JJeremy

@Dragan Babic, you can always add the html embed and add standard text (wrapped in <style> tags). That's my last resort though.

When you select different items, they will sometime have the options under the token drop-down. I'm not sure if you've seen this before.

I don't believe there is a way to do pseudo elements or classes yet so that specific selector might need the custom CSS method I first mentioned.

Attachment

DDragan Babic

Oh wow, that's a nice hack. Thanks for the idea @Jeremy !

Add a reply

Join the Webstudio community

Styling the invalid state of input fields