How to Change the Checkbox Background Color in 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 the Checkbox Background Color in CSS?

P

ppatelkap

Improve

Article Tags :

Similar Reads

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 th

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 Int

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: <!DOCTYPE html

How to change Background Color in HTML ?

The background color in HTML refers to the color displayed behind the content of a webpage. To change it, CSS (Cascading Style Sheets) is used, with various approaches available. In CSS, we define the background-color property within a CSS rule, specifying a color value such as a name, hexadecimal c

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 Set Transparent Background Color in CSS ?

Creating a simple transparent background involves styling HTML elements using CSS to achieve the desired visual effect. We can use different approaches to achieve this effect including, RGBA color values and the Opacity property. Below are the approaches to set transparent background color in CSS: T

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