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

How to Change Selected Text Background Color in CSS?

Last Updated : 30 Jul, 2024

Sometimes, we need to change the color and background color of the selected text. The ::selection pseudo-element is used to change the background color of the selected text in CSS. This pseudo-element allows you to style the portion of text that has been selected by the user.

Using ::selection Pseudo-element

The ::selection pseudo-element is used to style the background color of the selected text. This pseudo-element targets the portion of a text that is currently selected by the user.

Syntax:

::selection {
    background-color: color_name;
    color: color_name;
}

Example 1: In this example, we will change the selected text color and background color using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to Change Selected Text 
        Background Color in CSS?
    </title>
    
    <style>
        ::selection {
            background-color: green;
            color: white;
        }
    </style>
</head>

<body>
    <p>
        Welcome to GeeksforGeeks, A 
        computer science portal
    </p>
</body>

</html>

Output:

selected-text-background-color

Example 2: In this example, we will change the selected text color and background color based on element in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to Change Selected Text 
        Background Color in CSS?
    </title>
    
    <style>
        body {
            text-align: center;
        }
        
        h1::selection {
            background-color: green;
            color: white;
        }

        p::selection {
            background-color: blue;
            color: red;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <p>
        Welcome to GeeksforGeeks, A 
        computer science portal
    </p>
</body>

</html>

Output:

selected-text-background-color-2

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

P

ppatelkap

Improve

Article Tags :

Similar Reads

How to Change the Background Color of Table using CSS?

Changing the background color of a table using CSS can help improve the visual appearance of a website or web application. we will learn how to change the background color of the table using CSS with different approaches.These are the following approaches:Table of Content Using Inline CSSUsing Inter

How to Change the Checkbox Background Color in CSS?

Change the checkbox background color in CSS by hiding the default checkbox and using custom styles with the ::before and ::after pseudo-elements. This involves creating a custom checkbox that looks and works just like a regular checkbox but with your own design.Below are the approaches to change the

How to Change Background Color in HTML without CSS ?

In HTML, you can change the background color of an element using the bgcolor attribute. However, it's important to note that the bgcolor attribute is deprecated in HTML5 and should be avoided in favor of using CSS for styling. This article will cover various methods to change the background color of

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

Most of the browsers by default highlight the selected text in a blue background. This can be changed by using the ::selection pseudo selector in CSS. The ::selectionselector is used for setting the CSS property to the part of the document that is selected by the user (such as clicking and dragging

How to change the color of selected text using CSS ?

The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background. Below example implements the above approach: Example: html <!DOCTYPE h

How to change Background Color in HTML ?

The background color in HTML sets the visual backdrop behind your webpage content. Around 85% of beginner developers start by customizing background colors to enhance design and readability. Using CSS (Cascading Style Sheets), you can easily apply colors through the background-color property. This c

How to Change Background Color in Google Docs : Easy Steps to Follow

How to Change Background Color on Google Docs - Quick Steps Open Google Docs > Choose a DocumentGo to File > Select Page SetupClick on Page Color > Choose ColorClick "Ok"Changing the background color in Google Docs is a simple yet effective way to personalize your documents and make them vi

How to change the background color of the active nav-item?

In this article, we will learn how we can change the background of the active nav item with the help of CSS and jQuery. Given an HTML document containing a list of items, the task is to change the background color of a particular list item when it is active or clicked. We can change the background c

How to Change Background Color in WordPress?

Changing the background color in WordPress can be achieved through various methods. It simply means modifying the website appearance by setting a different color for the site background. This can be done in various methods in this article we explain how to change the background color in WordPress wi

How to Change the Border Color on Hover in CSS ?

Border color in CSS defines the color of an elementâ€™s border. You can change the border color on hover using the :hover pseudo-class, allowing you to modify the borderâ€™s appearance when a user hovers over the element. Using CSS hover Pseudo ClassThe hover pseudo-class in CSS is a powerful tool that