We Started A Facebook AutoLiker & AutoCommenter. Check Out Our EXELiker & EXECommenter...

How To Stop Highlighting A Web-Page Using Pure CSS Code?

How To Stop Highlighting A Web-Page Using Pure CSS Code?

After my previous article that is "How To Disable Highlighting The Text From DIV, Blog And Website?" I am here to share the CSS version that are also better then that in some ways that is is quick to load then that and also will works on JavaScript blocker because it is not a JavaScript code but it will not full-fill all the features of JavaScript code.

So as you wish and what you want to use but i am here to share all the way to Stop Highlighting Using CSS and secure your content. All you need to do is use a CSS selector class of selection and define the style to use on your text when a visitors tries to highlight the test. But what if you want to do the opposite and want to disable your visitor from highlighting the text all together? There is an experimental property called user select which will allow you to define new instructions when the visitor tries to highlight your content.

This feature can be a good way of making it harder for people to highlight your content and copy it into their own website. This is currently support on webkit, firefox and IE 10. To use the property you need to prefix it with the different browser prefixes but you should also place the non-prefixed version to future proof the property.

Features:

1.) It Will Disable Highlighting Text Of Your Whole Blog Or A DIV Only.
2.) It Will Disable Highlighting Via Mouse As Well As Keybord.
3.) Simple And Short Pure CSS Code.
4.) Easy To Install And Quick, Quick, Quick To Load.
5.) It Will Help You To Secure Your Content.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

Disable Whole Web Page:

<style type='text/css'>
body {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>


Disable All Span Tags:
<style type='text/css'>
span {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>


Disable All P Tags:
<style type='text/css'>
p {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>


Disable Selected DIV Tag:
<style type='text/css'>
#DIV {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>


Disable Selected Class Tag:
<style type='text/css'>
.class {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>


Disable Blog Post Only:
<style type='text/css'>
.post{
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>

Customization:

1.) The values on this property are:
Auto - Visitors can select all content in the element.
None - Selecting content is disabled.
Text - Can only select text content.

2.)  Save and done.

You Like It, Please Share This Recipe With Your Friends Using...

10 Responses to “How To Stop Highlighting A Web-Page Using Pure CSS Code?”

  1. You should plus one more :)
    This will disable Highlighting on the post only

    .post {
    -webkit-user-select: none; /* Webkit */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10 */
    /* Currently not supported in Opera but will be soon */
    -o-user-select: none;
    user-select: none;
    }

    I hope you can add it from your post :D

    Regards Danial

  2. Anonymous says:

    Please tell how to add google plus jquery popup widget for blogger like this widget :

    http://www.exeideas.com/2012/05/stylish-lightbox-pop-up-facebook-like.html

  3. Jordan Hale says:

    Your steps are very easy to follow. Thanks for it sir.

  4. TECHNO says:

    its 2014 bro .. pls do something for opera too..

    • EXEIdeas says:

      We Are Waiting For The Update From Opera. Every Browsers Have There Own Code Too But Opera Doesn’t. So Its From Opera Side. But Still You Can Do It In Other Way, Just Add Unselectable On In Your Body As <body unselectable=”on” For Opera And IE.

Leave a Reply