Home | Contact | Videos | MediaZo

How to change the font color and background color of selected text using only css

Websites having huge amount of contents and tutorials are often used for the references and usually bookmarked. Do you think upon delivering a unique gumption of feelings to your users who used your contents for their source of information’s? The best way is to change the background and the color of the selected text on the website.

backgroundcolor How to change the font color and background color of selected text using only css

You can easily change the background and the text color of the selected text using CSS properties defined below

::-moz-selection{
    background:#cc3333;
    color:#fff;
}

::selection {
    background:#cc3333;
    color:#fff;
}

In case you want to implement this into your WordPress blogs then you just need to open the WordPress theme directory ( wp-content/themes/yourthemename/style.css) and the above CSS files into your style sheet. backgroundcolorchangetextcss How to change the font color and background color of selected text using only css

Note:

  1. I used the red shade (#cc3333) because its my default color scheme, you may used the colors matched with your webpage.
  2. This method works like cream and is compatible with with Mozilla Firefox and Safari. This doesn’t work on Internet Explore.
  3. We defined
    <strong>::-moz-selection</strong>

    for Mozilla Firefox whereas ::selection is used for default Safari browsers.


Honey Singh is Head of Operations & Strategic Planning at MediaZo. He has an experience of 5 years in designing, ideating/operating digital/social marketing strategies for global brands. You can also catch him on Foursquare, Twitter, Facebook , Google+ & Instagram.

2 Responses to “How to change the font color and background color of selected text using only css”

  1. Thanks for the Tip! I needed some CSS help desperately!

  2. L’me know how can i help you ?

Leave a Reply


nine − four =