Change Default Text “::Selection” Color

::selection is one of a property which changes the default color of the selected text and promotes Branding very impressively. As CSS improving, it ads more features day-by-day, some of the features we know and some may not.

Pseudo CSS Selector – ::selection

The ::selection is a CSS pseudo-element which changes the color of the text while user selects text by clicking & dragging mouse or by keyboard on the webpage.

The Default Color/ System Color of the selected text on the webpage is Navy Blue. This small & simple snippet of CSS pseudo-element is very useful as it gives freedom to change the default color of the selected text and it also helps in improving Site Branding by giving Brand Color to the Selected Text.

::-moz-selection,
::selection {
    background-color: #21759b;
    color: #fff;
}

You can change the selected text’s color for as many elements by combining them with ::selection property.

p::-moz-selection,
p::selection {
    background-color: #ccc;
    color: #222;
}

Gecko is the only engine where we need to add the vendor prefix. On other browsers it simply drops this property.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.