Jesse Schoff Jesse Schoff - 2 months ago 9
CSS Question

Manipulate ::selection pseudo-element in developer tools

Is it possible to adjust the properties of the :selection pseudo-element in Developer Tools?

I'd like to be able to test different background and font colors for selections without modifying the source CSS file, but I cannot find the pseudo-element anywhere when inspecting the page.

Answer

You can accomplish this in Internet Explorer and Firefox by right-clicking inside the Styles panel and selecting New Rule.

  1. Right-click in Styles panel
  2. Select Add New Rule from context menu
  3. Write new ::selection rule and add properties

enter image description here

Chrome has a small icon in the Styles panel that you can click to create a new Rule.

  1. Click New Style Rule button in Styles panel
  2. Write new ::selection rule and add properties

enter image description here

Comments