Treehouse

CSS Selection Styling

By on  

The goal of CSS is to allow styling of content and structure within a web page.  We all know that, right?  As CSS revisions arrive, we're provided more opportunity to control.  One of the little known styling option available within the browser is text selection styling.  Windows provides an ugly dark blue color for text selection and Mac provides a lighter blue color.  Mozilla Firefox, Internet Explorer 9, Opera, and Webkit-based browsers allow you to customize the styling of selected text.  Let me show you how.

The CSS

/* webkit, opera, IE9 */
::selection { background:lightblue; }
/* mozilla firefox */
::-moz-selection { background:lightblue; }

The -moz prefixed property is obviously for Firefox while the basic ::selection selector is for Webkit-based browsers.  Much like the other CSS selectors, you can nest usage of selection to use different colors in different places and depths:

/* webkit, opera, IE9 */
div.highlightBlue::selection { background:lightblue; }
/* mozilla firefox */
div.highlightBlue::-moz-selection { background:lightblue; }

/* webkit, opera, IE9 */
div.highlightPink::selection { background:pink; }
/* mozilla firefox */
div.highlightPink::-moz-selection { background:pink; }

CSS selection styling is just another one of those simple touches you can add to make your website more refined and vibrant!

ydkjs-5.png

Recent Features

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

  • 5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • Create Your Own Dijit CSS Theme with LESS CSS

    The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme...

  • Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

Discussion

  1. I’d like to add IE9 also good supports ::selection. It pains me to say that.

  2. Opera also supports the ::selection

  3. I am assuming that the -moz prefix can be dropped in FF4 than?

    Question, what is the real difference between pseudos with a “:” and “::”. Based on what I have observed I can only come to the conclusion one is for an element state and one is for element attr styling such as selection, placeholder etc….

  4. Thanks for the info i look forward to using it soon.

  5. KFee

    This doesn’t seem to apply to input or textarea boxes, at least in Chrome. Is there any way to accomplish selection styling in those elements?

  6. Coolest thing I’ve learnt today!

  7. Any more CSS goodies?

  8. me

    It also works on windows phone using IE.

  9. How can you change selection styles only in a specific div?

  10. Dan

    @Evil1

    Say you have a div with a class of tennisBall and another div with class of baseBall.

    to style it, you would use:
    /* webkit, opera, IE9 */
    div.tennisBall::selection { background:lightblue; }
    /* mozilla firefox */
    div.tennisBall::-moz-selection { background:lightblue; }
    
    /* webkit, opera, IE9 */
    div.baseBall::selection { background:pink; }
    /* mozilla firefox */
    div.baseBall::-moz-selection { background:pink; }
    

    That code would style the selection of Baseball to pink, and the style selection of tennis ball to lightblue..Hope this helps!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!