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:

Here is the CSS for apply green background for specific element:

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

Arjun
I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.
DMCA.com Protection Status