4

In Internet Explorer 11 Developer Tools, upon inspecting an element, you can click the a: button under the Styles tab to force the element's Hover and Visited states.

Is there a way to do the same for :focus?

I want to be able to see the CSS styles applied to the element when focussed.

1 Answers1

10

Unfortunately, the Dev Tools are not able to force focus on an element this way yet.

To see an element's focus styles you can manually focus on the element (by clicking or using tab for instance) and then inspect the element.

If you inspect the element first and then apply focus, the focus styles won't show up. In that case you'll have to inspect another element first, and then the one you focused.

Here's a demo I just made:

Inspecting :focus styles

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
  • 1
    This is a great tip, and the demo is really useful. If there are more CSS properties than will fit in the frame though, it's impossible to see them as scrolling down the pane will alter the state of the inspected element. Another IE frustration! –  Mar 31 '15 at 08:02
  • unfortunately doesn't work for :active - just when i needed to debug an issue with IE rendering, the IE dev tools fail me again. – Mr. Bungle Jun 21 '16 at 07:46
  • + additional note : Dev tool must be docked to the main window. – AbbasAli Hashemian Oct 05 '20 at 13:54