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
- Why anchor tag does not take height and width of its containing element
- Add <style> element to an HTML using Python Dominate library
- how to remove blue background on chrome autocomplete
- How do I use variable fonts with Google Fonts?
- JS manipulates the DOM, then CSS doesn't load properly on refresh, even though cache is disabled
- Align section heading with the first content item instead of centering in Flexbox layout
- Get rid of spaces between spans
- Remove button when logged in (wordpress)
- Is border-image possible in Tailwind?
- How to strike through obliquely with css
- CSS cross through an element
- Is pop-out effect using blob svg achievable?
- How to set borders between children from parent in CSS?
- Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
- How do CSS triangles work?
- Making planets follow their orbit in HTML/CSS
- How to make row scroll (overflow) on x axis when reach max width
- Why is CSS flex not working when deployed?
- Radial progress bar using TailwindUI
- Column of h2 elements takes width of the biggest, how to prevent?
- HTML5 and CSS grid - Can't get it to fit the content
- How to disable scroll without hiding it?
- Tailwind CSS "justify-center" works if used with "flex-row" but doesnt work with "flex-col"
- How can I change the color of an 'svg' element?
- How to control website tinting in Safari 15
- How do you prevent header tags from stretching across the body width
- Dark mode flickers a white background for a millisecond on reload
- How can I set "cursor: pointer" on Vuetify v-data-table rows? (expanded item area excluded)
- How can I inspect the shadow DOM of native controls in Chrome developer tools?
- 100vh height when address bar is shown - Chrome Mobile