Change default CSS of Google Chrome

Question

I would like to be able to change the default CSS used by chrome, such as removing the underlines for links, etc. However, I cannot find the default CSS file used by Chrome. Does anyone know where it is?

Answer 1

(Update 2014) Since support of user stylesheets was recently removed from Google Chrome, the only option for this moment is to use extensions (like Stylus *1), but these will behave differently (see below).

The most relevant request for re-introducing true user stylesheets in Google Chrome is Issue 347016: Support user stylesheets.

Per specification, "true user stylesheet" rule has lower origin specificity in cascade than author rule, but !important user stylesheet rules have higher origin specificity than !important author rule, regardless of its selector specificity.

Extensions mimicking user style-sheets in Chrome simply injects (hopefully) last style element into page, what have some consequences:

• such style is at "author level" in the cascade, so you must make sure your !important rule has higher specificity than one you want to override
• "your" injected style is exposed to page scripts, so they can easily delete it at will.

*1 Original extension, Stylish, is currently (2017) in state of erratic development by a new mainetainer, so I'd advise to avoid it and use alternative like aforementioned Stylus.

---

(Following original answer is now obsolete.)

Afaik it is not possible to tweak the UA css itself, but you can make a global userstyle: start Chrome once with --enable-user-stylesheet. This will create <user-data-dir>/<profile>/User StyleSheet/Custom.css which you can use (changes are propagated immediately). http://code.google.com/p/chromium/issues/detail?id=2393

Answer 2

You can have a look at this discussion : Issue 2393: Support user stylesheet

At the very end they mention that the --enable-user-stylesheet parameter when starting Chrome would enable custom stylesheets..

Answer 3

The only solution I can think of it to use a Greasemonkey script that adds a style entry to every html page which turns off the underlines for links. Something like:

<style> a {text-decoration:none} </style>

This article can apparently get you started:
HOW TO: Install Google Chrome Greasemonkey Scripts (Windows Only)

Answer 4

If you are interested in customizing particular web sites, you can use greasemonkey style user scripts.

Answer 5

There is an issue when use Stylish as user-style injector:
user priority level without !important is higher than author priority level without !important

So I write a user-script as injector:
https://github.com/zcyzcy88/SelfColle/blob/master/StyleInject.user.js

principle:
Inject style at document.head.prependChild(), before webpage author's style, has a lower priority, to avoid user-style overlay.

Answer 6

In 2018, Chrome >= 68.0.3440.106 (and probably much earlier)

I already had the extension Resource Override for various development uses, so I now use that to add my own stylesheet to fix some bad style choices in JIRA (and to hide more ads - heh heh). The option I use is "Inject File" and it works very well. I've not tried regexing the 'url' setting to make it only work on particular sites, but my css selectors are specific enough that I can just leave the url as '*'

Answer 7

I came across this question when looking for a solution on how to provide a stylesheet for unstyled pages. None of the solutions above helped me much an still as of 09/2018 chrome does not support the previously removed custom stylesheet function.

The solution I came up with and that works like charm for my use case is achieved by using this chrome addon with a custom js script that inserts my custom css to page's header if it does not have any stylesheets. It won't work on a page that has any stylesheet linked but for my use case it is sufficient.

Here is the JS script I'm using:

window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
    console.log(document.styleSheets); 
    if (document.styleSheets.length > 0) {
        return;
    }

    var css = `
    /*Your CSS goes here*/
    `;
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
  });

Answer 8

Since Chrome 65, local overrides are supported. See the feature description in the release notes.

Answer 9

You can change chromes css ui style. Just remember if you change it, some effects like Example: #footer {color:#5F5F5F !important;} will change on every site that uses #footer. You been warned. Custom.css changes almost everything in chromes browsers

Windows XP Google Chrome:

C:\Documents and Settings\%USERNAME%\Local Settings\Application Data\Google\Chrome\User Data\Default

Chromium:

C:\Documents and Settings\%USERNAME%\Local Settings\Application Data\Chromium\User Data\Default\User StyleSheets

Windows 7 or Vista (help in help section) Google Chrome:

C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

Chromium:

C:\Users\%USERNAME%\AppData\Local\Chromium\User Data\Default\User StyleSheets

Mac OS X Google Chrome:

~/Library/Application Support/Google/Chrome/Default/User StyleSheets

Chromium:

~/Library/Application Support/Chromium/Default/User StyleSheets

Linux Google Chrome:

~/.config/google-chrome/Default/User StyleSheets

Chromium:

~/.config/chromium/Default

Chrome OS

/home/chronos/

Want proof check out my theme for the program editor http://userstyles.org/styles/95226/chrome-userstyles-editor-hacker-version-cyberat

Feel free to check me out, i create UI style sheets or random sites like facebook google.etc, and make them black & red.

Answer 10

Use Stylebot.

Chrome

Library of users' scripts

For firefox, Customize your web