Change Text Selection Color With CSS

Changing the text selection color is always a nice touch, it shows that you’re paying attention to the finer details of the site.
Today in this snippet we share a quick tip that will allow you to achieve some different looks for your selected text.

[css]
/* Mozilla based browsers */
::-moz-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Safari */
::selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Opera */
::-o-selection {
background-color: #FF68B0;
color: #FFF;
}
::-ms-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Internet Explorer */
::-webkit-selection {
background-color: #FF68B0;
color: #FFF;
}
[/css]

View Source →

Maan
Maan

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

There is 1 comment
  1. Hi!

    Thanks for sharing your discoveries.

    I can complete it a bit.
    There is only the “-moz-” vendor, others do not exist: http://caniuse.com/#feat=css-selection

    The folowing lines are good enough:
    /* Mozilla based browsers */
    ::-moz-selection {
    background-color: #FF68B0;
    color: #FFF;
    }
    /* Works in IE, chrome, safari & opera */
    ::selection {
    background-color: #FF68B0;
    color: #FFF;
    }

    Cheers,
    Thomas.

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

div#stuning-header .dfd-stuning-header-bg-container {background-image: url(http://www.downgraf.com/wp-content/uploads/2017/04/login-back.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 500px;}