Selection styling with CSS

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.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

DMCA.com Protection Status