{"id":376,"date":"2012-03-19T11:43:15","date_gmt":"2012-03-19T11:43:15","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=376"},"modified":"2012-03-19T11:43:15","modified_gmt":"2012-03-19T11:43:15","slug":"css-disable-text-selection","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/css-disable-text-selection\/","title":{"rendered":"CSS Disable Text Selection Example"},"content":{"rendered":"<p>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, \u00a0<strong><em>disable text selection\u00a0of any div or hyperlink, etc. using CSS.<!--more--><\/em><\/strong><\/p>\n<h2><strong><em><\/em><\/strong>How to Disable text selection using CSS &#8211; Example<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=376\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Simply paste the following \u00a0code in your CSS, changes values as needed and you are all set!<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;style type=\"text\/css\"&gt;\n#content {\n-webkit-user-select: none;\n-khtml-user-select: none;\n-moz-user-select: none;\n-ms-user-select: none;\nuser-select: none;\n}\n&lt;\/style&gt;\n\n&lt;div id=\"content\"&gt; Try selecting all this text. You will see that all of it is unselectable.&lt;\/div&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=376\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Your turn!<\/h5>\n<p>Do you know of any other ways to <strong>disable text selection using pure CSS<\/strong>? If yes, please feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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, \u00a0disable text selection\u00a0of any div or hyperlink, etc. using CSS.<\/p>\n","protected":false},"author":1,"featured_media":276,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[18,13],"tags":[52],"class_list":["post-376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tips-and-tricks","category-tips-and-tricks","tag-css-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-64","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}