62

I am trying to disable the User Agent Stylesheet in chrome. How can I turn this off/disable this?

enter image description here

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
user603007
  • 11,416
  • 39
  • 104
  • 168
  • 10
    Do you want to *hide* those rules from being listed in Developer Tools? Reasonable request. Do you want to disable those rules from being applied to your page? Bad idea, and not going to happen. – thirtydot Aug 01 '13 at 23:35
  • 3
    Curious why it is a bad idea to disable those rules from applying to a page. I am trying to find the root cause of: http://stackoverflow.com/questions/29570594/input-type-number-mouse-wheel-does-not-scroll and it would be great to quickly just disable all these style sheets to help narrow down the problem. – pspahn Apr 11 '15 at 00:31
  • 5
    You can override those settings in your css style sheet. for example, you can text-decoration:none in your element.style – Apparao May 29 '15 at 14:26
  • That comment helped me the most. Thank you @Apparao! – apingaway Jul 12 '22 at 19:16
  • But there are MANY user agent stylesheet rules, some with long names like margin-block-start. No obvious way to disable them all either for testing purposes or to remove all margins and paddings from navigation uls and lis. – David Spector Jul 26 '23 at 18:48

1 Answers1

33

https://developers.google.com/chrome-developer-tools/docs/settings

  1. Open Chrome dev tools
  2. Click gear icon on bottom right
  3. In General section, check or uncheck "Show user agent styles".
Arnaud
  • 7,259
  • 10
  • 50
  • 71
jhanifen
  • 4,441
  • 7
  • 43
  • 67
  • 5
    While this may theoretically answer the question, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for a more in-depth view of the solution. – Cody Guldner Aug 02 '13 at 03:11
  • 10
    fwiw - this has changed some in the newest version of chrome dev tools – jhanifen Nov 18 '13 at 21:09
  • 5
    It's very weird: It's literally gone, despite the fact that the [current chrome docs](https://developer.chrome.com/devtools/docs/settings) still show the option `show user agent styles` in the first screenshot (first column, last option there) – Frank N Mar 31 '16 at 09:45
  • 9
    So chrome seems to have completely removed this option. – Yash Capoor May 13 '17 at 14:51
  • 7
    Was this ever figured out? It's 2019 now and I've suddenly got no way to override an H2 bold, i.e., my css is being overridden by user agent stylesheet. – 147pm Feb 19 '19 at 06:01
  • And chrome now displays auto-filled inputs as blue: !important.. great – Matti Mar 08 '19 at 14:50
  • 2
    I ran into this just now as well, moving the non-triggering CSS blocks higher in the stylesheet ended up revealing a typo in one definition which meant everything below it was being ignored. – Mark Solaris Aug 17 '20 at 10:43
  • 8
    2021. I don't see any "General section" nor "Show user agent styles". Could you update the correct path as of 2020s ? – Hugolpz Mar 13 '21 at 16:29
  • 2
    in Chrome v90, how to off the "User style agent" sheet. It is always blocking my popup modal, it is set to display: none in chrome version 90. – Jeya Suriya Muthumari Apr 19 '21 at 14:24