I'm trying to edit an element but the style I need to edit is grayed out for some reason. What could be causing this? The other question does not seem to address this case.
Asked
Active
Viewed 1,542 times
2
-
I think it's about inline style? – Temani Afif Feb 25 '19 at 14:14
-
1See https://crbug.com/922181 - it happens in Chrome if the ruleset was created programmatically. – wOxxOm Feb 25 '19 at 14:14
-
2https://stackoverflow.com/questions/3265555/what-does-it-mean-when-a-css-rule-is-grayed-out-in-chromes-element-inspector [Duplicate] – Andrew Kovalchuk Feb 25 '19 at 14:16
-
1@AndrewKovalchuk I mentioned that other question, it does not seem to address this case - the grayed out rule in the answer is user agent stylesheet, while in my case it is a custom style. – riv Feb 25 '19 at 14:21
-
Close Chrome and open again. Worked for me after some hair pulling. – Adamz May 01 '20 at 01:54
2 Answers
2
- Crossed out styles are being overridden by another CSS rule
- Grayed out text is a rule that isn't applied (eg pre-fixed for another browser)
- A gray background represents Read Only styles that can't be edited in the inspector.
See this Question for more details. Chrome devtool documentation
Bryce Howitson
- 7,339
- 18
- 40
-
2I can't find anything in that question or documentation that explains why the style is considered read-only. I got that it is read-only since I can't edit it, but that doesn't explain *why* I can't edit it. – riv Feb 25 '19 at 15:15
-
-
-2
It means that this rule was overrode by some other rule.
In your case, all of the prefixed rules (-webkit/-moz...) were overrode by the standard user-select rule.
Ronen Cypis
- 21,182
- 1
- 20
- 25
-
It's not so much that it's overridden as Chrome *ignores* `-moz`, `-ms`, etc. prefixed rules entirely, as they're not intended for Chrome at all. It *does* listen to the `-webkit` prefixed one as it's Webkit based. – ceejayoz Feb 25 '19 at 14:45