chrome : how to turn off user agent stylesheet settings?

Question

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

Wye

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

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: #29571094 and it would be great to quickly just disable all these style sheets to help narrow down the problem. – Olvan

You can override those settings in your css style sheet. for example, you can text-decoration:none in your element.style – Hemotherapy

That comment helped me the most. Thank you @Apparao! – Maebashi

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

Answer 1

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

Flyer

While this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for a more in-depth view of the solution. – Trimurti

fwiw - this has changed some in the newest version of chrome dev tools – Flyer

It's very weird: It's literally gone, despite the fact that the current chrome docs still show the option show user agent styles in the first screenshot (first column, last option there) – Krystin

So chrome seems to have completely removed this option. – Scramble

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

And chrome now displays auto-filled inputs as blue: !important.. great – Correlation

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

2021. I don't see any "General section" nor "Show user agent styles". Could you update the correct path as of 2020s ? – Pompon

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

Answer 2

in case someone stumbles on this. If you want to disable the rules from being applied to your template. Just do a css reset https://www.joshwcomeau.com/css/custom-css-reset/#our-finished-product-10

The above link should help explain better

Rawlins