How to make a custom text selection color?

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>

https://codepen.io/codewithsnowbit/pen/yLpKXBq

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;
}

https://codepen.io/codewithsnowbit/pen/YzYaVoy

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

https://codepen.io/codewithsnowbit/pen/MWrVoWq

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!

Dhairya Shah's Blog