Styling the invalid state of input fields

At a glance

The community member is using Webstudio and is having trouble styling the invalid state of input fields, as they cannot write their own selectors. They would normally use the input:invalid:not(:focus):not(:placeholder-shown) selector, but this is not possible in Webstudio. The comments suggest that the community member can add HTML embed and standard text wrapped in <style></code> tags as a workaround, and that there may be options in the token drop-down to handle this, though pseudo-elements and classes may not be supported. One community member suggests this is a "nice hack" in response.</p>

DDragan Babic

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