User agent stylesheet modification?

n21lv

n21lv

Hello everyone,

I've noticed a really annoying change that came with one of the recent updates: Opera's user CSS is now imposing a "min-height: 1.2em" style on <option> elements, which makes every drop-down list look huge and cover a lot of the page area. Is it possible to modify the built-in user CSS to disable this "feature"?

burnout426

burnout426 Volunteer

I've been wondering this myself. With Firefox, you can modify the file for it in the program files directory (which might get overwritten on upgrade). Not sure how you do that with Chromium and Opera. I think the built-in stylesheet is hardcoded in the binary.

For Opera, I think you'd have to do it with an extension like https://addons.opera.com/en/extensions/details/addcss/ or https://addons.opera.com/en/extensions/details/style-injector/ or https://addons.opera.com/en/extensions/details/custom-style-script/. The last one at least allows you to apply CSS overrides to all sites at once.

burnout426

burnout426 Volunteer

Or, you could just make an extension yourself.

manifest.json:

{
    "name" : "Fix Default Stylesheet",
    "version" : "0.1",
    "description" : "Fix Default Stylesheet",
    "permissions": [
        "contentSettings"
    ],
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "css": ["default.css"]
    }],
    "manifest_version": 2

(don't think the contentSettings permission is needed in this case, so remove it if it works without it)

default.css

option {
    min-height: 0px !important
}

Then, put manifest.json and default.css in a folder. Then, ctrl + shift + e to go to extensions, click "developer mode", click "load unpacked extension", and load the extension from the folder.

I never really tested to see what the css for an extension is applied. In your case, you want the CSS to be applied before the page's CSS because you're patching the default user-agent style sheet. But, the CSS might get applied after, so it may override a page's style.

burnout426

burnout426 Volunteer

Note that Opera didn't change anything itself. It's getting it because it uses Chromium. See https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/html.css?q=html.css&sq=package:chromium&dr&l=795.