How to disable a link using only CSS

Question

Is there any way to disable a link using CSS   I have a class called current-page and want links with this class to be disabled so that no action occurs when they are clicked

User · Answer

Demo here Try this one     html   on  click    a Link   function event       event preventDefault

User · Answer

If you want it to be CSS only  the disabling logic should be defined by CSS   To move the logic in the CSS definitions  you ll have to use attribute selectors  Here are some examples    Disable link that has an exact href     You can choose to disable links that contain a specific href value like so     lt a href    website com exact path  gt Exact path lt  a gt    href    website com exact path      pointer-events  none      Disable a link that contains a piece of path      Here  any link containing  keyword in path will be disabled   lt a href    website com keyword in path  gt Contains in path lt  a gt    href    keyword       pointer-events  none      Disable a link that begins with      the  attribute  value  operator target an attribute that starts with a specific value  Allows you to discard websites  amp  root paths    lt a href    website com begins with path  gt Begins with path lt  a gt    href     website com begins with      pointer-events  none      You can even use it to disable non-https links  For example    a not  href   https          pointer-events  none      Disable a link that ends with      The  attribute  value  operator target an attribute that ends with a specific value  It can be useful to discard file extensions    lt a href   path to file pdf  gt Link to pdf lt  a gt    href    pdf      pointer-events  none      Or any other attribute  Css can target any HTML attribute  Could be rel  target  data-customand so on      lt a href     target   blank  gt Blank link lt  a gt    target  blank     pointer-events  none      Combining attribute selectors  You can chain multiple rules  Let s say that you want to disable every external link  but not those pointing to your website    a href        not  href   my-website com          pointer-events  none      Or disable links to pdf files of a specific website     lt a href    website com path to file jpg  gt Link to image lt  a gt    href     website com   href    jpg       color  red      Browser support  Attributes selectors are supported since IE7   not   selector since IE9

User · Answer

The pointer-events property allows for control over how HTML elements   respond to mouse touch events     including CSS hover active states    click tap events in Javascript  and whether or not the cursor is   visible    That s not the only way you disable a Link  but a good CSS way which work in IE10  and all new browsers    x000D   x000D   current-page   x000D    pointer-events  none  x000D    color  grey  x000D    x000D   lt a href     class  current-page  gt This link is disabled lt  a gt  x000D   x000D   x000D

User · Answer

x000D   x000D   disabled   x000D    pointer-events  none  x000D    cursor  default  x000D    opacity  0 6  x000D    x000D   lt a href     class  disabled  gt link lt  a gt  x000D   x000D   x000D

User · Answer

CSS can t do that   CSS is for presentation only   Your options are    Don t include the href attribute in your  lt a gt  tags  Use JavaScript  to find the anchor elements with that class  and remove their href or onclick attributes accordingly   jQuery would help you with that  NickF showed how to do something similar but better

User · Answer

It s possible to do it in CSS   x000D   x000D   disabled  x000D    cursor default  x000D    pointer-events none  x000D    text-decoration none  x000D    color black  x000D    x000D   lt a href  https   www google com  target   blank  class  disabled  gt Google lt  a gt  x000D   x000D   x000D    See at   Please note that the text-decoration  none  and color  black  is not needed but it makes the link look more like plain text

User · Answer

pointer-events none will disable the link    disabled          pointer-events none     lt a href     class  disabled  gt link lt  a gt

User · Answer

You can also size another element so that it covers the links  using the right z-index   That will  eat  the clicks     We discovered this by accident because we had an issue with suddenly inactive links due to  responsive  design causing a H2 to cover them when the browser window was mobile-sized

User · Answer

I used    current-page a hover   pointer-events  none  important      And was not enough  in some browsers it still displayed the link  blinking   I had to add    current-page a   cursor  text  important

User · Answer

One way you could do this with CSS  would be to set a CSS on a wrapping div that you set to disappear and something else takes it s place   E g     lt div class  disabled  gt       lt a class  toggleLink  href  wherever  gt blah lt  a gt       lt span class  toggleLink  gt blah lt  span  lt  div gt    With a CSS like   disabled a toggleLink   display  none    span toggleLink   display  none     disabled span toggleLink   display  inline      To actually turn off the a you ll have to replace it s click event or href  as described by others   PS  Just to clarify I d consider this a fairly untidy solution  and for SEO it s not the best either  but I believe it s the best with purely CSS

User · Answer

The answer is already in the comments of the question  For more visibility  I am copying this solution here    x000D   x000D   not-active   x000D    pointer-events  none  x000D    cursor  default  x000D    text-decoration  none  x000D    color  black  x000D    x000D   lt a href  link html  class  not-active  gt Link lt  a gt  x000D   x000D   x000D    For browser support  please see https   caniuse com  feat pointer-events  If you need to support IE there is a workaround  see this answer   Warning  The use of pointer-events in CSS for non-SVG elements is experimental  The feature used to be part of the CSS3 UI draft specification but  due to many open issues  has been postponed to CSS4

User · Answer

You can set href attribute to javascript void 0    x000D   x000D   disabled   x000D       Disabled link style    x000D    color  black  x000D    x000D   lt a class  disabled  href  javascript void 0   gt LINK lt  a gt  x000D   x000D   x000D

User · Answer

I searched over internet and found no better than this  Basically to disable button click functionality  just add CSS style using jQuery like so       myLink   css    pointer-events    none        Then to enable it again do this      myLink   css    pointer-events            Checked on Firefox and IE 11  it worked

User · Answer

Try this    lt style gt   btn-disable       display inline-block      pointer-events  none            lt  style gt

User · Answer

Apply below class on html   avoid-clicks     pointer-events  none

User · Answer

Bootstrap Disabled Link   lt a href     class  btn btn-primary btn-lg disabled  role  button  gt Primary link lt  a gt    lt a href     class  btn btn-default btn-lg disabled  role  button  gt Link lt  a gt    Bootstrap Disabled Button but it looks like link   lt button type  button  class  btn btn-link  gt Link lt  button gt

User · Answer

you can use this css    x000D   x000D  a button button   x000D      display  inline-block  x000D      padding  6px 15px  x000D      margin  5px  x000D      line-height  1 42857143  x000D      text-align  center  x000D      white-space  nowrap  x000D      vertical-align  middle  x000D      -ms-touch-action  manipulation  x000D      touch-action  manipulation  x000D      cursor  pointer  x000D      -webkit-user-select  none  x000D      -moz-user-select  none  x000D      -ms-user-select  none  x000D      user-select  none  x000D      background-image  none  x000D      border  1px solid rgba 0  0  0  0   x000D      border-radius  4px  x000D      -moz-box-shadow  inset 0 3px 20px 0  cdcdcd  x000D      -webkit-box-shadow  inset 0 3px 20px 0  cdcdcd  x000D      box-shadow  inset 0 3px 20px 0  cdcdcd  x000D    x000D   x000D  a disabled  button button disabled    x000D      cursor  not-allowed  x000D      opacity  0 4  x000D      pointer-events  none  x000D      -webkit-touch-callout  none  x000D    x000D   x000D  a button active not  disabled   button active not  disabled     x000D      background-color  transparent  important  x000D      color   2a2a2a  important  x000D      outline  0  x000D      -webkit-box-shadow  inset 0 3px 5px rgba 0  0  0   5   x000D      box-shadow  inset 0 3px 5px rgba 0  0  0   5   x000D    x000D   lt button disabled  disabled  gt disabled  lt  button gt  x000D   lt button gt click me  lt  button gt  x000D   lt a href  http   royansoft com  disabled  disabled  class  button  gt test lt  a gt  x000D   lt a href  http   royansoft com  class  button  gt test2 lt  a gt  x000D   x000D   x000D

User · Answer

CSS can only be used to change the style of something  The best you could probably do with pure CSS is to hide the link altogether   What you really need is some javascript  Here s how you d do what you want using the jQuery library      a current-page   click function     return false

User · Answer

Another trick is to place a invisible element above it  This will disable any hover effects as well   myButton      position  absolute      display  none      myButton  after       position  absolute      content         height 100       width 100       top 0      left 0

User · Answer

If you want to stick to just HTML CSS on a form  another option is to use a button  Style it and set the disabled attribute   E g  http   jsfiddle net cFTxH 1

User · Answer

x000D   x000D   lt a href      gt 1  Link With Non-directed url lt  a gt  lt br gt  lt br gt  x000D   x000D   lt a href      disabled  gt 2  Link With with disable url lt  a gt  lt br gt  lt br gt  x000D   x000D   x000D

User · Answer

Thanks to everyone that posted solutions  I combined multiple approaches to provide some more advanced disabled functionality   Here is a gist  and the code is below   This provides for multiple levels of defense so that Anchors marked as disable actually behave as such  Using this approach  you get an anchor that you cannot    - click   - tab to and hit return   - tabbing to it will move focus to the next focusable element   - it is aware if the anchor is subsequently enabled   1   Include this css  as it is the first line of defense   This assumes the selector you use is  a disabled      a disabled         pointer-events  none        cursor  default          2  Next  instantiate this class such as  with optional selector         - gt        new AnchorDisabler     Here is the coffescript class   class AnchorDisabler   constructor   selector    a disabled   - gt        selector  click  onClick  keyup  onKeyup  focus  onFocus     isStillDisabled   ev    gt          since disabled can be a class or an attribute  and it can be dynamically removed  always recheck on a watched event         target     ev target      return true if target hasClass  disabled       return true if target attr  disabled   is  disabled      return false    onFocus   ev    gt          if an attempt is made to focus on a disabled element  just move it along to the next focusable one          return unless  isStillDisabled ev       focusables       focusable       return unless focusables      current   focusables index ev target      next    if focusables eq current   1  length then focusables eq current   1  else focusables eq 0        next focus   if next     onClick   ev    gt        disabled could be dynamically removed     return unless  isStillDisabled ev       ev preventDefault       return false    onKeyup   ev    gt         13 is the js key code for Enter  we are only interested in disabling that so get out fast     code   ev keyCode or ev which     return unless code is 13        disabled could be dynamically removed     return unless  isStillDisabled ev       ev preventDefault       return false

[html] How to disable a link using only CSS?

Examples related to html

Examples related to css