Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Overriding The default text selection color with CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 891
    Comment on it

    Hello Readers!

    Browsers have a default text selection color (mainly, blue or orange). However, this setting can be overrided with the CSS  pseudo-element ::selection. This overrides the browser-level text selection color with a color of our choosing. It is definitely one of the "forward-enhancement" techniques we have today. It is a pleasure for those using modern browsers.

    Note that, the double colon is strictly necessary in the syntax for this pseudo element particularly. Although other pseudo elements accept a single colon in syntax.

    Only Safari and Firefox are the two browsers supporting this, and that too in different ways.

    Using this pseudo element is great, especially when  you want to match the user-selected text to your site's color scheme.

    There are three properties that ::selection works with:

    • color
    • background-color
    • text-shadow

    If you try a property other than these, that property will be ignored.

    Use it as follows.

    1.  Mozilla based browsers
    ::-moz-selection { 
        background-color: red; 
        color: #000; 
    }

        2. Safari

    ::selection {
        background: red;
        color: #000;
    }

     

    Here is a sample code.

    HTML :

    <p>Select me to see normal behavior.</p>
    <p class='example-color'>Try selecting me for a different text color.</p>
    <p class='example-background-color'>You can select me for a different background color.</p>
    <p class='example-background'>You can also select me for a different background.</p>
    <p class='example-both'>Guess what&hellip; you can select me for a different background color and text color.</p>
    <p class='example-shadow'>How about a text-shadow? Sure, select me for a different text-shadow.</p>
    

    CSS :

    .example-color::selection {
      color: #8e44ad;
    }
    .example-background-color::selection {
      background-color: #f1c40f;
    }
    .example-background::selection {
      background: #e74c3c;
    }
    .example-both::selection {
      background-color: #8e44ad;
      color: white;
    }
    .example-shadow::selection {
      text-shadow: 1px 1px 0 #27ae60;
    }
    
    body {
      font-family: 'Source Sans Pro', Arial, sans-serif;
      line-height: 1.45;
      background: #E0DCCC;
      color: #333;
      padding: 1em;
      font-size: 18px;
    }
    
    p  {
      margin-bottom: 1em;
    }
    
    

    Try it and see the output for yourself.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: