cssgoogle-chromefirefoxfirefox-developer-toolsie-developer-tools
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.
Solution
You can accomplish this in Internet Explorer and Firefox by right-clicking inside the Styles panel and selecting New Rule.
- Right-click in Styles panel
- Select Add New Rule from context menu
- Write new
::selectionrule and add properties
Chrome has a small icon in the Styles panel that you can click to create a new Rule.
- Click New Style Rule button in Styles panel
- Write new
::selectionrule and add properties
- How to style an HR tag to have a title embedded in it
- CSS class disappeared without notice, where did it go?
- Find the "potential" width of a hidden element
- How to use an SVG as the cursor
- Select elements by attributes with ":" (colon)
- React Native FlatList with position absolute behind Components
- How to make flex-direction column containing wide content respect flex-grow and flex-basis?
- Place a background image over an image
- Embed image in a <button> element
- Dashed border animation in css3 animation
- Elements jumping on the screen non-stop, when element is on the edge of being in intersection (Intersection Observer)
- CSS Typed OM -- parsing background color?
- Filtering 'current-menu-item' class to use 'active' instead
- Website is not scrolling horizontally on mobile
- Image on top of background-image
- Javascript code doesn't fire until the 2nd click for an html button?
- CSS - padding (or margin) not resizing the container
- CSS color vs. background-color vs. background?
- Bootstrap 5 tooltip placement top issue when page has a scroll
- How can I override PrimeNG p-divider color
- Body height 100% displaying vertical scrollbar
- Text border using css (border around text)
- How can I set a minimum amount of space between flexbox items?
- How can I achieve a curved effect at the bottom of my page without having to reset my gradient pattern?
- Rails 7 with Import Maps and CSS Bundling: Assets Not Served from /builds Directory
- How to add a custom font in CSS?
- Overflow auto not working with justify-content: flex-end
- How to Add Space Between Two Texts in a Mantine Badge Component?
- How do I exclude certain elements from a flexbox in css without wrapping the element in a new div?
- Responsive Bootstrap Navbar