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
How to get a summary of your CSS changes in Chrome dev tools?
You can see all changes via the Changes Drawer
In Dev Tools, you can locate the Changes Drawer via either:
A) Open Command Palette (Ctrl + Shift + P) and type "changes"
B) Open Drawer (Esc), click on the more options menu (triple dot), and select Changes
Further Reading
- How to get a summary of your CSS changes in Chrome dev tools?
- Export CSS changes from inspector (webkit, firebug, etc)
Updates
- Dev Tools 98 added More precise changes to automatically pretty prints changes
- Issue #1296143 opened User-Select: none in Changes drawer makes it very hard to utilize
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.
Related Topics
Performance Difference Between JavaScript Created Inline Styles and JavaScript Created Stylesheets
Jquery/Js:Detect User's Scroll Attempt Without Any Window Overflow to Scroll To
Disable Inertia Scroll for "Single-Page" Webapp
Change CSS Link Property Onclick with JavaScript/Jquery
Transitioning Affixed Navigation Bar - CSS
JavaScript - Page Has to Be Refreshed to Show Particle-Slider Logo Effect
Is It Better to Use Jquery Fadein or CSS3 Animations
Websites That Archive Cross-Browser, Cross-Platform CSS/Js Bugs
Force iOS Numeric Keyboard with Custom/Currency Pattern
Jqm Ui-Content 100% Height Issue
Triggering CSS :Active Selector for Non-Anchor Elements
Bootstrap 3 Popover Arrow and Box Positioning
Jquery Example (In Jsfiddle) Working in Firefox But Not in IE8, 7
Uncaught Syntaxerror: Unexpected Token Illegal
Changing Background Color of a Specific Row in Slickgrid
CSS Class Selector Styles Not Being Applied in React Project