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.

By Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.

Leave a Reply

Your email address will not be published. Required fields are marked *