Highlighting Custom Selection using CSS

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.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Custom Text Selection
  </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h3>Custom Text Selection</h3>
  <p class="select">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum veritatis rerum necessitatibus illo corrupti blanditiis quis, placeat officia aliquam, optio, sunt asperiores. Debitis tempore doloremque corrupti, esse ipsum corporis beatae!</p>

  <h1>Tutor Joes</h1>

</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  padding: 0;
  margin: 0;
  
}
::selection{
  background-color: #e74c3c;
  color:white;
}
body{
  width: 100vw;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
h3{
  font-size: 25px;
  font-weight: normal;
}

p{
  padding: 10px;
}
.select::selection{
  background-color: #2c3e50;
  color:white;
}

h1{
  user-select: none;
}

Output

Live Preview

CSS Tutorial

Properties Reference

CSS Properties Reference Guide

Highlighting Custom Selection using CSS

Source Code :

css/style.css

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects