Cant edit CSS STYLE properties (grayed out & blocked) in chrome
Closing the dev tools and opening it again fixes this temporarily. Here's the official bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=796629
What does it mean when a CSS rule is grayed out in Chrome's element inspector?
For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.
Greyed/dimmed out text, can mean either
- it's a default rule/property the browser applies, which includes defaulted short-hand properties.
- It involves inheritance which is a bit more complicated.
Inheritance
Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node.
I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.
In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.
The rules which are applied to the currently selected element appear in normal text.
If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.
here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
Excerpt from the article
This [inheritance scenario] can occasionally create a bit of confusion, because defaulted
short-hand properties; figure 21 illustrates the defaulted short-hand
properties of the font property along with the non-inherited
properties. Just be aware of the context that you're looking at when
examining elements.
Style Definitions in webtools which I cannot edit
Grayed Box
We need to consider the possibility that the question refers to the same bug discussed here: Cant edit CSS STYLE properties (grayed out & blocked) in chrome
This issue occurs when the css rules come from style tags in your html.
Grayed specific rule
In Google Chrome web tools, when you are viewing elements -> style
, you are focused on a certain element.
The grayed rules, are rules of parents, which are not inherited (according to CSS rules) and therefor don't affect the actual CSS properties of the element. For this reason you can't edit them while focused on that specific element.
If you do want to edit the css of that specific element, you can use the element.style. If you want to change the grayed out css properties, find that HTML element and focus on it. Then you can edit the rule.
On the top right you see because the source of the css rules is within a style tag in your html file, not an external css file.
What does it mean when a class style is greyed out in Chrome's style inspector?
For the currently selected DOM node, this pane displays all the styles
applicable to this node. Styles with gray background are read-only,
the rest are editable.
Source: Computed Style Pane
Usually the grayed out areas are for user agent stylesheet
styles, which are styles defined by the browser vendor. These are typically overridden by your own styles. You can use CSS Reset to normalize the styles across browsers.
I am not totally sure why .productQuote
is specifically grayed out here, but my guess is it's come from a Chrome Extension.
What does it mean when Chrome Dev Tools shows a computed property greyed out
NB: This answer has no solid evidence, it's based on my observations along the time.
The gray calculated properties are neither default, nor inherited. This only occurs on properties that were not defined for the element, but calculated from either its children or parent based on runtime layout rendering.
Take this simple page as an example, display
is default and font-size
is inherited:
<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>
In this particular example, height
is calculated from <p>
's children - text node (font size plus line height), width
is calculated from its parent - <div>
's width, which is also calculated from its parent <body>
.
EDIT: Well I thought again, here's my opinion based answer. I should really go and take a look at Chromium source code later :D
By expanding those arrows, you could see which actual rule is applied to the element, among all those defined against it (either directly or inherited, either by developer or browser):
Here you can trace down to every definition even including browser built-in rules, and check with the CSS cascading (overriding) mechanism.
So, for those elements that have no CSS definition (no directly defined, no inherited, no browser built-in), you don't have any source to trace. And the property values are totally runtime calculated.
If you check Show all, more grayed properties are shown. These are not defined anywhere either. But unlike those in previous screenshots, these are not runtime calculated - they are CSS spec default value.
Why height property in Chrome Developer Tool is greyed out
This is typically caused by the user agent style-sheet. You can override this usually by reordering your CSS or with a CSS normalizer (like normalize.css or reset.css, though these can add unnecessary bloat to your code if you don't need all of it).
It is important to note the order in which your style-sheets are invoked because CSS is by definition, cascading and the lowest definitions will take precedence.
In brute force situations, and only when there are no other clear solutions, you can use !important
declarations.
Why are some HTML elements grayed out in Developer Tools?
Developer Tools grays out any non-visible elements. So, for example, the <head>
, <meta>
, and <title>
tags are all grayed out, since they are not actually visible to the user. Similarly, an element with display: none
will be grayed out. It's nothing to worry about—the browser is simply trying to be helpful.
Related Topics
CSS Positioning 70-30 with Inline-Block
Background Size Cover Ie11 Not Covering Full Area
Selenium How to Access Two Controls of Same CSS Class
How to Increase The Width of The Tooltip in Bootstrap-Vue
Improving Balance in Flexbox Lines
Lesscss - Ie Gradient Filter with Variables and Lighten
Left/Right Transparent Cut Out Arrow
CSS Cursors Are Not Working in Webkit Browsers
Change Background Colour as Page Scroll Without Jquery
Horizontal Navigation with Logo in Middle
How to Get Page Content to Stretch and Stick Footer to Bottom of Page
Min - Height with Child Set to Position:Absolute