Join the Webstudio community

Updated 3 months ago

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?
J
D
2 comments
@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
CleanShot_2024-11-08_at_16.27.322x.png
Oh wow, that's a nice hack. Thanks for the idea @Jeremy !
Add a reply
Sign up and join the conversation on Discord