Override selection style with CSS

#css #design

You may have noticed that certain designs, such as the amazing SI Digital website, have a custom style for the selection of text. When used properly, to match your designs main colour for example, this can give a really nice and polished feel.

It's really quite simple to implement as well. You can change the foreground color as well as the background color like so:

::selection { color: white; background: #5AB54A; }
::-moz-selection { color: white; background: #5AB54A; }

Not all properties can be set using ::selection though. Properties that can be set are color, background, background-color and text-shadow. Though according to this article, background-image is ignored. Setting the background to use an image is also ignored, and it appears that opacity is also set and unable to be changed.

Still, this is a very nice feature for modern browsers, and can really add that finishing touch to your design.

Quadratic AI – The Spreadsheet with AI, Code, and Connections

AI-Powered Insights: Ask questions in plain English and get instant visualizations
Multi-Language Support: Seamlessly switch between Python, SQL, and JavaScript in one workspace
Zero Setup Required: Connect to databases or drag-and-drop files straight from your browser
Live Collaboration: Work together in real-time, no matter where your team is located
Beyond Formulas: Tackle complex analysis that traditional spreadsheets can't handle

Get started for free.

Watch The Demo 📊✨