Introduction
So are you sick of the default text selection color? I am, so today we're going to override the default color with one that's a lot more attractive. It will be readily apparent when someone is selecting text on your website, and it will give your users something pleasant to look at for a change!
In this article, we are going with
- Vanilla CSS
- Tailwind CSS
Let's get started with Vanilla CSS
HTML Structure
Let's create basic structure with dummy/placeholder text,
<h1>Dummy Text</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex consectetur et Lorem id labore pariatur veniam Lorem eiusmod ea ex mollit labore incididunt irure. Voluptate ad enim quis nisi ea ipsum. Dolor sit aliquip sunt consequat consequat est aute laboris. Quis ad veniam in. Laborum culpa elit elit et magna magna veniam nostrud eu. Minim voluptate aliquip ea. Id sunt nulla proident proident voluptate et dolor reprehenderit ex culpa irure laborum fugiat duis tempor. Proident minim laboris proident eiusmod laborum. Enim pariatur et eu voluptate pariatur ex consequat non dolor eiusmod reprehenderit elit sit aliquip consectetur. Laboris dolor ad sint exercitation commodo.
</p>
Styling it
It's time to make it little beautiful for our satisfaction,
body{
max-width: 640px;
margin-left: auto;
margin-right: auto;
background-color: #0f172a;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
h1{
font-size: 35px;
text-decoration: underline;
text-underline-offset: 2px;
}
p{
line-height: 1.2em;
font-size: 30px;
}
Changing text selection color
In CSS, we use ::selection
selector to change the styling of text selection. Here's how you do,
p::selection {
background-color: #22d3ee;
}
Check out the final output
Tailwind CSS
With tailwind CSS it's super easy to do,
<p class="selection:bg-cyan-400">text</p>
By adding the selection:
class to the text you can change the styling of the text.
Here's how it looks finally,
<div class="mx-auto max-w-screen-sm text-white">
<h1 class="text-[35px] font-bold underline underline-offset-4">Try selecting the text below and check the difference</h1>
<p class="text-[30px] leading-8 selection:bg-cyan-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex consectetur et Lorem id labore pariatur veniam Lorem eiusmod ea ex mollit labore incididunt irure. Voluptate ad enim quis nisi ea ipsum. Dolor sit aliquip sunt consequat consequat est aute laboris. Quis ad veniam in. Laborum culpa elit elit et magna magna veniam nostrud eu. Minim voluptate aliquip ea. Id sunt nulla proident proident voluptate et dolor reprehenderit ex culpa irure laborum fugiat duis tempor. Proident minim laboris proident eiusmod laborum. Enim pariatur et eu voluptate pariatur ex consequat non dolor eiusmod reprehenderit elit sit aliquip consectetur. Laboris dolor ad sint exercitation commodo.</p>
</div>
Check out the live demo - https://play.tailwindcss.com/50kgHqFNYO
Conclusion
I hope you enjoyed the article. Thank you for reading!
Let’s connect
If you found my content helpful and would like to thank me, feel free to Buy me a coffee :)
Have a great day!