CSS
CSS Disable Text Selection Example
Although accessibility is a primary requirement of any website design, there are times when you wish that some areas of the website, such as hyperlinks text (when rendered as buttons) selection is disabled. So with just few lines of code in css, disable text selection of any div or hyperlink, etc. using CSS.
How to Disable text selection using CSS – Example
Simply paste the following code in your CSS, changes values as needed and you are all set!
<style type="text/css">
#content {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<div id="content"> Try selecting all this text. You will see that all of it is unselectable.</div>Your turn!
Do you know of any other ways to disable text selection using pure CSS? If yes, please feel free to share by commenting below.
Do you have a spam problem on this blog; I also am a blogger, and I was wanting to know your situation; many of us have developed some nice procedures and we are looking to trade strategies with others, why not shoot me an email if interested.
Wilfredo Neuhart
March 20, 2012 at 10:01 am
Hi Wilfredo,
Yes, most of the comments that are received are spam and I just simply delete them. I don’t understand why spammers waste their time as all comments are moderated. I think if they spend at least half of the time in developing their own website, they will earn a better recognition.
You are welcome to use the “Contact Us” link at the top of the page and send us any suggestions you have may for the offer that you have made to me.
Robert
March 21, 2012 at 11:39 am
salutations from across the world. interesting article I will return for more.
Jailbreak
March 30, 2012 at 9:36 pm
I think this is better than java script, am i correct?
I’m not familiar with jQuery, CSS etc. I have blogger platform blog. I have four question.
1). If we added this code is it affect the SEO of our blogs? Can search engine read our blog post text without any issue?
2). This method work on all the web browsers? I only tested Firefox and IE (next I’m going to test it chrome).
3). We need to put this code?
Try selecting all this text. You will see that all of it is unselectable.
If so where?
4). Are there any way to easy disable this code to our reader, like java scripts?
Thanks!
September 17, 2012 at 6:08 am
Hi Chathu,
Yes, this method is better than using JS especially because it does not have the overhead of running JS functions, etc.
Here are the answers for your questions:
1. Addition of this code will not have any effect on SEO. Disabling text selection is for the users, not for search engines. The text and all of the contents of the page can be disabled for search engines (if you want) by using the following meta tag within the head tag of the webpage:
META NAME=”ROBOTS” CONTENT=”NOINDEX, NOFOLLOW”
2. This won’t work on previous versions of IE. That said, I believe it should work IE8+. I don’t think IE7 supports CSS3, so you might want to check it. IE6? Forget it!
3. Put the code in your stylesheet. You might be using it already. Just look for a file that ends in .css and included in the page that you are running & add it in that stylesheet.
4. Possibly. You might want to Google that for more info.
Hope that helps.
Robert
September 18, 2012 at 5:31 am
Nice! But can we disable keyboard key (Ctrl+A/Ctrl+C) with CSS?
Ovee
December 28, 2012 at 3:22 pm
I am afraid there’s no way to do it via CSS only, AFAIK . You are better off with a JavaScript solution.
Robert
December 28, 2012 at 6:46 pm