How to make a custom text selection color?

How to make a custom text selection color?

Written by Dhairya Shah on Apr 6th, 2022 ・ Views ・ Report Post

Dhairya Shah Visit User Profile

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

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

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!

Comments (0)