Last updated on February 25, 2018
One of the little known styling options is selection text styling with in the browser.Yes, it is possible to define color, background and text-shadow for text the user selects. The double colon :: CSS pseudo-element is required for styling.
Windows provides a dark blue color for text selection and Mac provides a lighter blue color so to change those colors we use,
- This is the paragraph with normal
::selection. - This is the paragraph with
::-moz-selection.
Here is the CSS for apply green background for page:
/* webkit, opera, IE9 */
::selection { background:green; }
/* Mozilla Firefox */
::-moz-selection { background:lightblue; }
Here is the CSS for apply green background for specific element:
/* webkit, opera, IE9 */
div.impContent::selection { background:green; }
/* mozilla firefox */
div.impContent::-moz-selection { background:green; }
::selection only work with three properties : color, background ,text-shadow.
Mozilla Firefox, Internet Explorer 9, Opera 23+, Android 4.4+ and Web kit-based browsers allow you to customize the styling of selected text.iOS do not support it.