How to override the default text selection color with CSS?

CSS Web Development Front End Technology

To override the default text selection color with CSS, the code is as follows −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   ::-moz-selection {
      color: rgb(255, 255, 255);
      background: rgb(118, 69, 231);
   }
   ::selection {
      color: rgb(255, 255, 255);
      background: rgb(118, 69, 231);
   }
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   p {
      font-size: 40px;
   }
</style>
</head>
<body>
<h1>Text selection color example</h1>
<h2>Select some text to see the text selection color</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto consequuntur fugiat 
doloremque adipisci vero iste soluta ea ut! Exercitationem rem dolore delectus modi 
repellat quo mollitia temporibus laudantium, alias itaque tempora, iure voluptatem 
non voluptas, deleniti laborum? Cum ducimus unde, vitae consequuntur nobis dignissimos 
similique officia possimus quis necessitatibus praesentium!
</p>
</body>
</html>

Output

The above code will produce the following output −

On selecting some text the color changes as in the below screenshot −

AmitDiwan

Published on 08-May-2020 14:41:56

Previous Page Print Page