"Custom CSS" Parsing Issues

I keep bumping into the same problem when using Custom CSS.

For example, I simply want to edit the input autofill colour using this method from stackoverflow.

I paste the code in

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

It doesn’t work. I wonder why. I close component, re-open and notice it’s actually parsed it like so:

input: -webkit-autofill:active{;
    -webkit-box-shadow: 0 0 0 30px white inset !important;

Why? What to change?

This happens to most code I paste in like this. It doesn’t happen in stackoverflow, codepen etc and I’m unfamiliar what the needs of this tiny little editor are?

Pretty annoying and a waste of time with something that should just work.

A bigger, full screen version would be most welcome (like custom html)

the “custom css” section is only for declarations (for example color: red), you don’t get to specify a selector because it’s applied inline into the element.
If you want to use pseudo-classes like :focus or :active you need to add a class to the element and use global styles in the header to target that class. This has other problems like the styles handled by weweb are inlined so your rule will have a lower specificity (so you may need to use !important that can create more troubles later), or the fact that the class is not necessarely applied to the element you want to target (so you need to change the selector to actually reach your target element)

Ok thanks for clarifying. Shame. That’s hard to manage.

I try to avoid using global styles as you can’t test with it - “Custom code and scripts will only appear on the published project.”