6

On the latest Chrome version, we got some powerful CSS tools to create rules using buttons and a highlight on every affected area when editing any rule in the inspector, this is very useful, but also some annoying to design a website.

If I am editing a rule like padding or margin, it shows a green or orange area around the element, for me is hard to say where is the border exactly with this colored area, I prefer to see the "REAL" result.

On the following image I am editing the padding and I can not see the border.

enter image description here

If I want to edit the border color to a different color, the line color turn into orange, then I can not see the color I am changing.

On the following image I am changing the border color to gray, as you can see it shows an orange border instead.

enter image description here

How do I disable/turn off this feature?

Google Chrome Version 73.0.3683.86

JROS
  • 71
  • 1
  • 2
  • 11
stramin
  • 2,183
  • 3
  • 29
  • 58
  • 1
    I'm afraid you cannot change/ turn off this feature without compiling your own version of Chromium, which I don't think is a good idea. From a FE point of view, the question is why you would care about this? No matter what the color of a property is, you can safety follow the design guide / spec from the layout you have and that's it. Honestly sometimes for debugging purpose, this might bothers me but it's not a big deal, as long as the result achieves, you can have another color of choice to test and replace it with a proper one later. – Duc Hong May 29 '19 at 15:56
  • @starmin can you provide code or a fiddle link? – AdityaSrivast Jun 04 '19 at 21:11

2 Answers2

2

You are using bit older version, this has been fixed in newer versions. Chrome Version 74.0.3729.169 and Canary Version 77.0.3812.0.

after updating chrome, if you still face this issue, here is the work around.

With mouse hover over selected element in DOM Tree.

enter image description here

Without mouse hover over selected element in DOM Tree.

enter image description here

You just need to remove hover from element selection.

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
0

<div unselectable="on">Test Text</div>

This is what i could find for you, it might just work for you. Full post here: How to stop highlighting of a div element when double-clicking

JROS
  • 71
  • 1
  • 2
  • 11