{"id":9329,"date":"2021-01-05T01:31:17","date_gmt":"2021-01-05T06:31:17","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=9329"},"modified":"2021-12-04T06:57:17","modified_gmt":"2021-12-04T06:57:17","slug":"disable-text-selection-highlighting-using-css","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/","title":{"rendered":"How to Disable Text Selection Highlighting Using CSS"},"content":{"rendered":"\n<p>You can use <a href=\"http:\/\/local.brightwhiz\/tag\/css\">CSS<\/a> for many things and one of the uses is to disable text selection in your text, tabs, buttons, and more.<\/p>\n\n\n\n<p>This can be done using the user-select selector which is supported in all major web browsers except for Internet Explorer 9 and earlier versions. We will highlight a <a href=\"http:\/\/local.brightwhiz\/tag\/javascript\">JavaScript<\/a> solution that can be used for older web browsers.<\/p>\n\n\n\n<p>The user-select syntax and available variations:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.dontselect {\n  -webkit-touch-callout: none; \/* iOS Safari *\/\n    -webkit-user-select: none; \/* Safari *\/\n     -khtml-user-select: none; \/* Konqueror HTML *\/\n       -moz-user-select: none; \/* Old versions of Firefox *\/\n        -ms-user-select: none; \/* Internet Explorer\/Edge *\/\n            user-select: none; \/* Non-prefixed version, currently\n                                  supported by Chrome, Edge, Opera and Firefox *\/\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Usage in HTML:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p&gt;\n   Selectable text.\n&lt;\/p&gt;\n&lt;p class=&quot;dontselect&quot;&gt;\n   Non-selectable text.\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>The following JavaScript solution can be used in Internet Explorer 9 and older browser versions to disable text selection highlighting:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">onSelectStart=&quot;return false;&quot;<\/code><\/pre>\n\n\n\n<p>Usage in HTML:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p&gt;\n  Selectable text.\n&lt;\/p&gt;\n&lt;p onselectstart=&quot;return false;&quot;&gt;\n  Non-selectable text.\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bonus Tip to Disable Text Selection Highlighting<\/h2>\n\n\n\n<p>You may also want to prevent the context menu from appearing on elements like buttons that have their selection prevented. To do that, add this code to the entire page, or just those button elements:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">$(&quot;body&quot;).on(&quot;contextmenu&quot;,function(e){\n    return false;\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>or:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">$(&quot;#buttonId&quot;).on(&quot;contextmenu&quot;,function(e){\n    return false;\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>You can use CSS for many things and one of the uses is to disable text selection in your text, tabs, buttons, and more. This can be done using the&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9330,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,9,27,16],"tags":[106,170,303,328,635],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Disable Text Selection Highlighting Using CSS<\/title>\n<meta name=\"description\" content=\"You can use the user-select selector in CSS to disable text selection on your HTML output on all major browsers\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Disable Text Selection Highlighting Using CSS\" \/>\n<meta property=\"og:description\" content=\"You can use the user-select selector in CSS to disable text selection on your HTML output on all major browsers\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-05T06:31:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-04T06:57:17+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"How to Disable Text Selection Highlighting Using CSS\",\"datePublished\":\"2021-01-05T06:31:17+00:00\",\"dateModified\":\"2021-12-04T06:57:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/\"},\"wordCount\":143,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg\",\"keywords\":[\"Browsers\",\"CSS\",\"HTML\",\"JavaScript\",\"Web\"],\"articleSection\":[\"Guides\",\"How To\",\"Programming\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/\",\"url\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/\",\"name\":\"How to Disable Text Selection Highlighting Using CSS\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg\",\"datePublished\":\"2021-01-05T06:31:17+00:00\",\"dateModified\":\"2021-12-04T06:57:17+00:00\",\"description\":\"You can use the user-select selector in CSS to disable text selection on your HTML output on all major browsers\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Disable Text Selection Highlighting\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Disable Text Selection Highlighting Using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/x.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Disable Text Selection Highlighting Using CSS","description":"You can use the user-select selector in CSS to disable text selection on your HTML output on all major browsers","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Disable Text Selection Highlighting Using CSS","og_description":"You can use the user-select selector in CSS to disable text selection on your HTML output on all major browsers","og_url":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2021-01-05T06:31:17+00:00","article_modified_time":"2021-12-04T06:57:17+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"How to Disable Text Selection Highlighting Using CSS","datePublished":"2021-01-05T06:31:17+00:00","dateModified":"2021-12-04T06:57:17+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/"},"wordCount":143,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg","keywords":["Browsers","CSS","HTML","JavaScript","Web"],"articleSection":["Guides","How To","Programming","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/","url":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/","name":"How to Disable Text Selection Highlighting Using CSS","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg","datePublished":"2021-01-05T06:31:17+00:00","dateModified":"2021-12-04T06:57:17+00:00","description":"You can use the user-select selector in CSS to disable text selection on your HTML output on all major browsers","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/disable-text-selection.jpg","width":1200,"height":630,"caption":"Disable Text Selection Highlighting"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/disable-text-selection-highlighting-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"How to Disable Text Selection Highlighting Using CSS"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/x.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/9329"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=9329"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/9329\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/9330"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=9329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=9329"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=9329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}