Google Developer Expert Add something different to your website by overriding the default text selection colour (boring blue and no text styling) when highlighting words/images on your website. Check out the demo below by highlighting the paragraphs, and add the code to your own website.
Note: Will not work in IE6-8, but you’re good on Safari/Chrome (WebKit), Mozilla FireFox (Gecko) and IE9+
Here’s the code to add to your CSS to implement your default text selection colour.
Table of contents
CSS (Global Colour Change)
/* IE9 - Also picked up by most modern browsers */
::selection {
background:#AC2937;
color:#FFF;
text-shadow:none;
}
/* Safari & Chrome - Webkit Rendering */
::-webkit-selection {
background:#AC2937;
color:#FFF;
text-shadow:none;
}
/* Mozilla based - Gecko Rendering */
::-moz-selection {
background:#AC2937;
color:#FFF;
text-shadow:none;
}
Free eBook
Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.
-
Observables and Async Pipe - Identity Checking and Performance
- Web Components <ng-template> syntax
- <ng-container> and Observable Composition
- Advanced Rendering Patterns
- Setters and Getters for Styles and Class Bindings
Observables and Async Pipe HTML
If you want to highlight different paragraphs, you can target individual elements like so:
<!-- Green Paragraph -->
<p class="green-select">Your paragraph text here.</p>
CSS (Specific Area Colour Change)
/* Green Paragraph Custom Selection Colours */
.green-select::selection {
background:#009E30;
color:#FFF;
text-shadow:none;
}
.green-select::-webkit-selection {
background:#009E30;
color:#FFF;
text-shadow:none;
}
.green-select::-moz-selection {
background:#009E30;
color:#FFF;
text-shadow:none;
}
Thanks for reading!
