CSS3 Change Text Selection Colour
How do I make an css3 change text selection colour?
A fantastic effect with CSS3 that takes your design one step further.. What is a css3 change text selection colour? How do you make a css3 change text selection colour? This script and codes were developed by Stathis Nikolaidis on 30 August 2022, Tuesday.
CSS3 Change Text Selection Colour - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Change Text Selection Colour</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>General Selection</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet eu.</p>
<h2>Yellow Selection with Green Fonts</h2>
<p class="yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet eu.</p>
<h2>Blue Selection with White Fonts</h2>
<p class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet eu.</p>
</body>
</html>
CSS3 Change Text Selection Colour - Script Codes CSS Codes
::selection {
background:#cccccc;
}
::-moz-selection {
background:#cccccc;
}
::-webkit-selection {
background:#cccccc;
}
h2::selection {
background:#fdacac;
color:#555;
}
h2::-moz-selection {
background:#fdacac;
color:#555;
}
h2::-webkit-selection {
background:#fdacac;
color:#555;
}
p.yellow::selection {
background:#eeeaa7;
color:#0a703a;
}
p.yellow::-moz-selection {
background:#eeeaa7;
color:#0a703a;
}
p.yellow::-webkit-selection {
background:#eeeaa7;
color:#0a703a;
}
p.blue::selection {
background:#4959f1;
color:#fff;
}
p.blue::-moz-selection {
background:#4959f1;
color:#fff;
}
p.blue::-webkit-selection {
background:#4959f1;
color:#fff;
}
Developer | Stathis Nikolaidis |
Username | stathisnikolaidis |
Uploaded | August 30, 2022 |
Rating | 3 |
Size | 1,902 Kb |
Views | 34,408 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Pseudo-Elements | 2,245 Kb |
Simple CSS3 Social Icons | 1,928 Kb |
Matrix | 1,922 Kb |
CSS3 Rounded Corners | 1,726 Kb |
Right Sidebar List | 2,164 Kb |
CSS3 Bottle Lifts Up on Hover | 2,993 Kb |
CSS3 Rising Sun | 2,200 Kb |
CSS3 8bit Cristiano Ronaldo | 4,860 Kb |
CSS3 Simple Moving Background | 1,910 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Filter inputs | Rowinf | 1,721 Kb |
3D-box | Parthviroja | 2,346 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Weather App | Kw7oe | 3,162 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!