{"id":4127,"date":"2017-03-02T07:37:08","date_gmt":"2017-03-02T12:37:08","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=4127"},"modified":"2021-12-08T13:46:22","modified_gmt":"2021-12-08T18:46:22","slug":"disable-a-link-using-css-no-javascript","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/","title":{"rendered":"How to Disable a Link in HTML Using CSS and no JavaScript"},"content":{"rendered":"\n<p>Like all things web development projects there is an easy way to do things and there is a complicated way to achieve the same result. This is no exception when you want to disable a link in <a href=\"\/\/local.brightwhiz\/tag\/html\/\">HTML<\/a>.<\/p>\n\n\n\n<p>Sure you could definitely use some <a href=\"\/\/local.brightwhiz\/tag\/javascript\/\">JavaScript<\/a> or jQuery and these form some elegant functionality. But what if you want a simple solution with little fuss and overhead? Enter <a href=\"\/\/local.brightwhiz\/tag\/css\/\">CSS<\/a>. Of course, there is always a gotcha when it comes to <a href=\"\/\/local.brightwhiz\/tag\/programming\/\">programming<\/a> and again there is no exception here, that brings us to the old trusty Internet Explorer. We will come to that later though.<\/p>\n\n\n\n<p>Sure you can disable a link in HTML only using the <code>onclick<\/code> event with a value set to &#8220;return false&#8221;. That works but like everything HTML it is not very portable.<\/p>\n\n\n\n<p>You can use JavaScript or even take advantage of jQuery but these solutions require a little bit more thought and code even though in many cases they could be the best solution to the problem at hand. Using JavaScript you could intercept the clicks, you could use fake click handlers or sorts.<\/p>\n\n\n\n<p>A CSS-only solution can be ideal where you are targeting active links in certain media types while not in others. An example would be when you need a phone link active on mobile devices but not on say a Desktop computer.<\/p>\n\n\n\n<p>With that said let us dive right in and see the CSS solution. You just need a single CSS selector set on an HTML element, class, or ID to achieve what you need. This takes care of the technical aspects of this solution. We then add two more selectors to help out the human factor in what you are trying to do. The solution involves the following:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Disable a Link in CSS<\/h2>\n\n\n\n<ol><li>Set the pointer-events selector to none this stops the click or any other events being triggered on the element<\/li><li>Set the cursor to default to make it visually clear that when a mouse is over the element nothing happens<\/li><li>Set the opacity lower to dim the text on the link. If it an image link then it may not be necessary depending on the type of image used<\/li><\/ol>\n\n\n\n<p>The code below illustrates the above in use.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.disabled-link {\n        pointer-events: none;\n        cursor: default; \n        opacity: 0.5;\n} <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;#&quot; class=&quot;disabled-link&quot;&gt;This link is disabled&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">What About IE?<\/h2>\n\n\n\n<p>The above solution works in most modern web browsers. For those still lingering in the IE world, you will need to put in a few extra minutes to accommodate that web browser&#8217;s needs. In IE the above solution will not work. The workaround is to leverage the disabled attribute of the <strong>&#8220;a&#8221;<\/strong> element. All other browsers will ignore it since the disabled attribute is not standard in HTML but it is according to IE. The example below shows what you need to do for IE.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">a[disabled] {\n pointer-events: none;\n }<\/code><\/pre>\n\n\n\n<p>There you have it. You can now comfortably disable links and build on the method to suit your needs as appropriate.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like all things web development projects there is an easy way to do things and there is a complicated way to achieve the same result. This is no exception when&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,17],"tags":[106,170,212,303,320,328,523,543,635,638],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Disable a Link in HTML Using CSS and no JavaScript<\/title>\n<meta name=\"description\" content=\"You only need CSS and not necessarily JavaScript to disable a link in HTML by leveraging the existing selectors and properties\" \/>\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-a-link-using-css-no-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Disable a Link in HTML Using CSS and no JavaScript\" \/>\n<meta property=\"og:description\" content=\"You only need CSS and not necessarily JavaScript to disable a link in HTML by leveraging the existing selectors and properties\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/\" \/>\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=\"2017-03-02T12:37:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T18:46:22+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"How to Disable a Link in HTML Using CSS and no JavaScript\",\"datePublished\":\"2017-03-02T12:37:08+00:00\",\"dateModified\":\"2021-12-08T18:46:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/\"},\"wordCount\":498,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.jpg\",\"keywords\":[\"Browsers\",\"CSS\",\"ECMAScript\",\"HTML\",\"Internet\",\"JavaScript\",\"Scripting\",\"Software Design\",\"Web\",\"Web Development\"],\"articleSection\":[\"Articles\",\"Guides\",\"Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/\",\"url\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/\",\"name\":\"How to Disable a Link in HTML Using CSS and no JavaScript\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.jpg\",\"datePublished\":\"2017-03-02T12:37:08+00:00\",\"dateModified\":\"2021-12-08T18:46:22+00:00\",\"description\":\"You only need CSS and not necessarily JavaScript to disable a link in HTML by leveraging the existing selectors and properties\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.jpg\",\"width\":1200,\"height\":630,\"caption\":\"disable a link\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Disable a Link in HTML Using CSS and no JavaScript\"}]},{\"@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 a Link in HTML Using CSS and no JavaScript","description":"You only need CSS and not necessarily JavaScript to disable a link in HTML by leveraging the existing selectors and properties","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-a-link-using-css-no-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Disable a Link in HTML Using CSS and no JavaScript","og_description":"You only need CSS and not necessarily JavaScript to disable a link in HTML by leveraging the existing selectors and properties","og_url":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-03-02T12:37:08+00:00","article_modified_time":"2021-12-08T18:46:22+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"How to Disable a Link in HTML Using CSS and no JavaScript","datePublished":"2017-03-02T12:37:08+00:00","dateModified":"2021-12-08T18:46:22+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/"},"wordCount":498,"commentCount":0,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.jpg","keywords":["Browsers","CSS","ECMAScript","HTML","Internet","JavaScript","Scripting","Software Design","Web","Web Development"],"articleSection":["Articles","Guides","Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/","url":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/","name":"How to Disable a Link in HTML Using CSS and no JavaScript","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.jpg","datePublished":"2017-03-02T12:37:08+00:00","dateModified":"2021-12-08T18:46:22+00:00","description":"You only need CSS and not necessarily JavaScript to disable a link in HTML by leveraging the existing selectors and properties","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/03\/disable-a-link.jpg","width":1200,"height":630,"caption":"disable a link"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/disable-a-link-using-css-no-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"How to Disable a Link in HTML Using CSS and no JavaScript"}]},{"@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\/4127"}],"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=4127"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/4128"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=4127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=4127"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=4127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}