50

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?

2
  • 4
    If you are a developer, I recommend not to do this since it changes the default value of css. Jun 1, 2012 at 14:38
  • 1
    For simple way to modify css using your own very simple extension see: stackoverflow.com/questions/21948850/…
    – User
    Mar 11, 2018 at 3:06

10 Answers 10

36

(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

4
  • 1
    yeah doesn't seem to be supported anymore (tried on chrome 73 and 76 (canary)) (Custom.css and the User Stylesheets don't exist anymore) May 6, 2019 at 4:36
  • 1
    >= Chrome 65: Dev Tools supports local overrides. developers.google.com/web/updates/2018/01/devtools#overrides
    – varontron
    Dec 29, 2019 at 17:22
  • 2
    Extensions can now inject styles with "user" level authority. developer.chrome.com/apps/extensionTypes#type-CSSOrigin
    – Eponymous
    Sep 10, 2020 at 16:31
  • @Eponymous Thank God! I was about to lose my mind trying to figure out how on earth I can override website styles. Without the CSS User Origin, there is no guarantee that my styles would override the author's styles. This way, I can safely override any website's styles.
    – Utku
    Jan 23, 2021 at 1:08
8

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

4

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)

2
  • 4
    I find it funny that I can't directly modify the CSS. Firefox has userChrome.css and userContent.css, which make modifying look and feel insanely simple.
    – George IV
    Oct 8, 2009 at 20:17
  • @harrymc - I switched your <style> code from the blockquote to the code so that you don't have to worry about the "extra spaces" Dec 23, 2009 at 2:37
2

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

0

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.

1
  • 4
    That won’t work because Chrome 33 dropped support for user styles.
    – Synetech
    Mar 27, 2014 at 4:51
0

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.

3
  • Hi, and welcome to SuperUser.com. Would you be able to go more in-depth on what your script does exactly? Mar 17, 2017 at 14:37
  • Inject style at document.head.prependChild(), to avoid userstyle overlay. Mar 18, 2017 at 7:07
  • If you can edit your answer, to go into more detail about what each part of your script does, would be helpful. Mar 20, 2017 at 14:43
0

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 '*'

0

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);
  });
0

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

1
  • 1
    It requires opened DevTools.
    – AlexP11223
    Jan 24, 2020 at 6:16
-1

Use Stylebot.

Chrome

Library of users' scripts

For firefox, Customize your web

1
  • 2
    Please quote the essential parts of the answer from the reference link(s), as the answer can become invalid if the linked page(s) change.
    – DavidPostill
    Dec 19, 2016 at 23:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.