-3

Using chrome, my website has some strange rectangle with light blue color. I have no idea where does this rectangle coming from as my DOM is very complex and not entirely in my control.

My question is: can I use chrome devtools to get the list HTML/CSS rules that determine the color of a pixel of my choosing? if not, is there some app that I can use? Maybe some JavaScript bookmarklet?

edit: I am aware of the element tab, but searching there did not help as the rule is complicated and I cant find it in the tree

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
yigal
  • 3,923
  • 8
  • 37
  • 59
  • You can not select it in dev tools by clicking on the blue border? – epascarello Oct 23 '19 at 19:52
  • In an HTML/CSS context, elements don't normally appear out of thin air with no HTML backing them. You should in most all cases be able to use Chrome's devtools to inspect the element that is generating this rectangle of which you speak and investigate from there. – esqew Oct 23 '19 at 19:52
  • So when does it happen? Is it always on the page? Does it happen on hover, focus, click, licking the screen*, dancing, etc? – epascarello Oct 23 '19 at 19:57
  • @epascarello it is always there and not affected by mouse movement, – yigal Oct 23 '19 at 20:11

1 Answers1

1

This is likely a focus highlight: https://www.washington.edu/accessibility/checklist/focus/ You should keep some form of highlight for accessibility purposes, however you can modify the color for aesthetics keeping in mind color contrast https://webaim.org/resources/contrastchecker/

Ted Fitzpatrick
  • 910
  • 1
  • 8
  • 18