Custom Text Selection Color Using CSS

When we select text or highlight text in html document in a browser, the default background color of the highlighted text is blue and the highlighted text color is white, sometimes it doesn’t suit your need (eg: your website theme), so you may want to change that, previously it is not possible to do as there is no standard css, now we could create custom text selection color easily using ::selection pseudo-element. Refer to Mozilla Developer Network, although not included in any W3C Recommendation, this selector was included in the draft, and now were added to CSS Pseudo-Elements Module Level 4 draft and called Highlight Pseudo-elements.

Rules and Browser Support

As introduced in CSS3 draft, ::selection pseudo-element isn’t supported by old versions of Internet Explorer, IE supports it on version 9+, while all modern browsers already support it. To use this element, we can just write ::selection, but for browsers that use Gecko engine, such as Firefox, it must be prefixed with -moz,  ::-moz-selection, also it should be noted that we can not use a single colon (:selection) which can be used on other pseudo-elements (such as :before and :after).

For properties, this element supports only few of  them, but in practice, only font-color, background-color, and text-shadow can be applied, for instance, The following css rule  show the example of using this pseudo-element:

::selection {
	background: red;
	color: #FFFFFF;
}
::-moz-selection {
	background: red;
	color: #FFFFFF;
}

Important to note that both of these rules should be written separately, otherwise it won’t work, we couldn’t combine it as we usually do using a comma separator, like following:

Doesn’t work:

::selection,
::-moz-selection {
	background: red;
	color: #FFFFFF;
}

Example of creating custom text selection color

Here is an example of CSS rule to change the color and the background of highlighted text to white and red

1.  Custom text selection color applied to particular element (<article>)

Try to highlight text in the following box, the first sentence is inside article <article> element,  the highlighted text will have white color and red background-color, while the second is using browser’s default behavior.

This first sentence placed inside <article> element, so that the highlighted text will have white color on the text and red color on the background.

This second sentence placed outside <article> element, so that the color and the background-color of highlighted text will use the default behavior of browser.

2. Custom text selection color applied to all elements

To apply this, just use ::selection pseudo-element without any other selectors, like so:

::selection {
	background: red;
	color: #FFFFFF;
}
::-moz-selection {
	background: red;
	color: #FFFFFF;
}

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social