Q:

How to change the default text selection color in the browsers using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  409 
Very Easy
0

How to change the default text selection color in the browsers using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS ::selection pseudo-element

By default, most of the browser highlights the selected text in blue background. However you can override this setting with the CSS ::selection pseudo-element.

Currently browsers only support a small subset of CSS properties for ::selection pseudo-element like color, background-color and text-shadow. Let's check out an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Overriding Default Text Selection Color</title>
<style>
    p::selection {
		color: #fff;
		background: #dda0dd;
		text-shadow: 1px 1px 2px #b040b0;
	}
	/* For Mozilla Firefox */
	p::-moz-selection {
		color: #fff;
		background: #dda0dd;
		text-shadow: 1px 1px 2px #b040b0;
	}
</style>
</head>
<body>
	<h2>Default Text Highlighting</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
	<h2>Custom Text Highlighting</h2>
    <p>Lorem ipsum quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
</body>
</html>
 

Note: The CSS text-shadow in ::selection pseudo-element is not supported in Internet Explorer; only supported in Chrome, Safari and Firefox 17+.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to remove the space between inline-block eleme... >>
<< How to expand select box to its default width on f...