# "Custom CSS" Parsing Issues

**URL:** <https://community.weweb.io/t/custom-css-parsing-issues/13854>\
**Category:** Ask us anything\
**Tags:** custom-css, bug\
**Created:** [October 10, 2024, 12:41pm UTC](https://community.weweb.io/t/custom-css-parsing-issues/13854 "2024-10-10T12:41:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![what.gift](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/what.gift/32/8069_2.png) [@what.gift](https://community.weweb.io/u/what.gift)\
**Post date:** [October 10, 2024, 12:41pm UTC](https://community.weweb.io/t/custom-css-parsing-issues/13854/1 "2024-10-10T12:41:23Z")

</div>

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](https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete).

I paste the code in

```auto
/* 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:

```auto
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)

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [October 10, 2024, 12:51pm UTC](https://community.weweb.io/t/custom-css-parsing-issues/13854/2 "2024-10-10T12:51:36Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![what.gift](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/what.gift/32/8069_2.png) [@what.gift](https://community.weweb.io/u/what.gift)\
**Post date:** [October 10, 2024, 1:12pm UTC](https://community.weweb.io/t/custom-css-parsing-issues/13854/3 "2024-10-10T13:12:34Z")

</div>

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.”_