Search code examples
cssstylish

Stylish Add-On: border-radius property breaking my CSS

I'm using the Stylish browser extension to create a custom dark theme for a website. In a recent update, the site owner came up with rounded corners for a lot of things, which is ugly as hell in my opinion, especially with input fields. However, when I try to apply border-radius: 0px !important; using Stylish, the input fields go nuts. It works fine on things like regular divs, but not on any kind of inputs, be it a regular <input type=text>, a <textarea> or even things like a <select>.

This is how a text area looks like without my custom CSS:

enter image description here

This is how it looks like with my custom CSS:

enter image description here

This is how it looks like when I add border-radius: 0px !important; to my CSS:

enter image description here

When border-radius: 0px is applied, all other border properties and background are ignored. Not even the site's native CSS properties are used. The browser just uses the standard look like there were no CSS rules defined for the textarea at all. color still works though.

It's like border-radius was intended to change everything. If I add it only on :hover, the input fields only go crazy on hover. I don't even have to use 0px: The issue happens even when I use the same 6px that the site's native CSS uses.

This is my whole CSS rule:

textarea, input[type="text"], .textbox {
    border-color: #282828 !important;
    border-width: 3px !important;
    border-style: solid !important;
    border-radius: 0px !important;
    background: #0F0F0F !important;
    color: grey !important;
}

What's really weird is the fact that border-radius: 0px causes no problems when added using the Firefox developer tools, so it seems to be a problem with stylish.

What's causing this madness? How can I fix it? Is there a workaround? The only idea I had is to use a custom JS that adds the property ...

Solution

  • Oh my god, removing border-style: solid; fixes everything. I have no clue why, but I am happy now.