How to Change the Color of Bullets using CSS?

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

Last Updated : 01 Jun, 2022

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 the mouse across text). Only some CSS properties are supported with this selector. These are color, background, cursor, and outline.

Syntax:

::selection {
    // Supported CSS Properties
}

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        ::selection {
            color: red;
            background: violet;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>

        <h2>
            How to change the default text
            selection color in the browsers
            using CSS
        </h2>

        
<p> please select me </p>

    </center>
</body>

</html>

Output:

Supported Browsers: The browser supported by the ::selection Selector are listed below:

Apple Safari 3.1
Google Chrome 4.0
Firefox 62.0 2.0-moz-
Opera 10.1
Internet Explorer 9.0

How to Change the Color of Bullets using CSS?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

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 Selected Text Background Color in CSS?

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 Pseud

How to Change the Color of Bullets using CSS?

Changing the color of bullets using CSS means styling the bullet points in a list (<ul> or <ol>) to have a different color than the text. This can be done using pseudo-elements or setting the color property on the list item, enhancing design consistency.1. Adding An Extra MarkupBy adding

How to Change the Color of Radio Buttons using CSS?

Here are three methods to change the color of radio Buttons using CSS:1. Using the accent-color PropertyThe accent-color property allows you to set the color of form controls like radio buttons and checkboxes.HTML<html> <head> <style> input[type="radio"] { accent-color: green; }

How to change browser theme-color using HTML ?

In this article, we will know how to change the browser theme-color in HTML. Suppose that if we want our website to appear in green color along with changing the browser theme color which will be the same as our website, then we can use a meta tag with name and content attribute. Meta Tag: The <m

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 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

How to change the cases of text in paragraph using CSS?

The approach of this article is to how to change cases of text in a paragraph by using the CSS text-transform Property. It is s used to control the capitalization of the text. It mainly changes the text into upper case and lowercase format. Syntax: text-transform: none | capitalize | uppercase | low

How to Change the Color of Link on Hover using CSS ?

Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU

How to change the color of an icon using jQuery ?

In this article, we will see how to change the color of the icon using jQuery. To change the color of the icon, we will use a jquery method. jQuery css() method this method is used to change the styling of a particular selector. This method is also can be used for changing the color of the icon. Fir