0

How do we override a user agent CSS property marked with "!important"?

For example: input[type="password" i] { -webkit-text-security: disc !important; }

from: https://github.com/chromium/chromium/blob/main/third_party/blink/renderer/core/html/resources/html.css


Looking at the following chart from mdn, the above task seems impossible:


The following posts are related, but they don't provide a direct answer to the above question:

Edit #1:

I genuinely don't believe this question is a duplicate of How to override !important? The other question doesn't deal with "user agent" specifically. "User Agent" has special overriding requirements, and solutions to the other post will not work here.

Please kindly review, thanks!

Emma
  • 316
  • 1
  • 7
  • Please provide a specific example. In some cases it's just a matter of being more specific. – isherwood Jun 20 '23 at 21:01
  • As you have already gathered, it is impossible. This is intentional. – Alohci Jun 20 '23 at 21:28
  • Hi @isherwood, "input::-webkit-input-placeholder { line-height: initial !important; } from https://github.com/chromium/chromium/blob/main/third_party/blink/renderer/core/html/resources/html.css – Emma Jun 21 '23 at 00:26
  • Hi @Alohci, I don't have any sources from the official CSSWG (or w3.org) spec though. If someone can provide the official source here, so I can report back to my manager, that would be greatly appreciated, thanks. – Emma Jun 21 '23 at 00:30
  • The official source is the [CSS Cascading and Inheritance Level 5](https://drafts.csswg.org/css-cascade-5/#cascading) specification. – Alohci Jun 21 '23 at 07:35
  • Thanks, Emma. Please put that information in your question, not down here. – isherwood Jun 21 '23 at 12:48
  • Hi @Alohci, overriding user-agent "!important" should be possible after the introduction of "@layer" in Chrome v99, according to the MDN tutorial: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#inline_styles:~:text=include%20an%20important%20declaration%20in%20a%20prior%20cascade%20layer – Emma Jun 21 '23 at 15:41
  • @Emma - Sorry, no. Your `@layer`s are all still in the author origin. They can't override !important declarations in the user-agent origin. – Alohci Jun 21 '23 at 16:26
  • Hi @Alohci, user CSS can have `@layer` too. – Emma Jun 21 '23 at 18:30
  • @Emma - true, but that won't override !important declarations in the user-agent origin either. – Alohci Jun 21 '23 at 19:58
  • Hi @Alohci, apparently, I found a way to override !important user-agent origin. I will be posting the answer once the "duplicate" tag is removed. – Emma Jun 21 '23 at 22:28

0 Answers0