Is it possible to make an HTML anchor tag not clickable/linkable using CSS?

Question

For example if I have this:

<a style="" href="page.html">page link</a>

Is there anything I can use for the style attribute that will make it so the link isn't clickable and won't take me to page.html?

Or, is my only option to simply not wrap 'page link' in an anchor tag?

Edit: I want to state why I want to do this so that people may be able to provide better advice. I am trying to set up my application so that the developer can choose what type of navigation style they want.

So, I have a list of links and one is always currently selected and all the others aren't. For the links that are not selected, I obviously want those to be normal clickable anchor tags. But for the selected link, some people prefer that the link remains clickable while others like to make it not clickable.

Now I could easily just programmatically not wrap an anchor tags around the selected link. But I figure it will be more elegant if I can always wrap the selected link in something like:

<a id="current" href="link.html">link</a>

and then let the developer control the linking style through CSS.

http://stackoverflow.com/questions/2091168/disable-a-link-using-css — brianc, Jul 18 '11 at 00:29
I would have to agree with David. Don't break UI paradigms. The expectation of a user is that links can be clicked. If it can't be clicked then its not really a link is it? — mrtsherman, Jul 18 '11 at 18:24
Check out http://stackoverflow.com/questions/2091168/disable-a-link-using-css for some more possible answers. — Oliver, Feb 12 '13 at 07:36
Yeah, this is a terrible idea. Screen readers will still see the link as a link, because it's a link. Search engines too. In fact, anything that understands HTML. Don't do this. There's nothing "elegant" about it. — Paul D. Waite, Jul 24 '13 at 13:06

Diego Unanue · Accepted Answer · 2017-04-05T16:52:47.683

358

You can use this css:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

And then assign the class to your html code:

<a style="" href="page.html" class="inactiveLink">page link</a>

It makes the link not clickeable and the cursor style an arrow, not a hand as the links have.

or use this style in the html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

but I suggest the first approach.

edited Apr 05 '17 at 16:52

answered Dec 13 '13 at 16:32

Diego Unanue

6,576
8
47
67

I can confirm this works on Ubuntu version of Firefox/Chrome. Wondering if it's going to work on IE on Windows though. – JohnMerlino Jul 14 '14 at 05:08
6

The key in this solution is: `pointer-events`. [Here](http://caniuse.com/#feat=pointer-events) the link for compatibility-table – masegaloeh Sep 02 '14 at 08:09
@JohnMerlino: doesn't work in IE9. See more at masegaloeh's link to the compatibility table – Howie Jan 12 '15 at 12:57
Caveat: Tabbing to move the focus to the link and using Enter to activate the link will still work – wtho Feb 14 '19 at 16:51
1

I don't think cursor: default is necessary. As long as you have pointer-events:none, that appears to work. – kloddant Dec 13 '19 at 17:57
Good answer. Straight and to the point, instead of "judging" the OP for the question and telling it's "wrong" ;). There can be some rare specific moments where the only thing you can do is use CSS to disable a link, because you don't have access to the HTML itself nor to any form of JS, only CSS, so this in handy. Thanks for the help! – OMA Jul 15 '20 at 13:17
This is not really a good solution since, when pointer-events is set to 'none', we can't customize the cursor to be, for example "not-allowed" or something like that – John Miller Jun 16 '22 at 16:05

score 60 · Answer 2 · edited May 28 '14 at 01:28

60

That isn't too easy to do with CSS, as it's not a behavioral language (ie JavaScript), the only easy way would be to use a JavaScript OnClick Event on your anchor and to return it as false, this is probably the shortest code you could use for that:

<a href="page.html" onclick="return false">page link</a>

edited May 28 '14 at 01:28

Rubens Mariuzzo

28,358
27
121
148

answered Jul 18 '11 at 00:52

Karan K

675
5
7

2

@Mike This one make the click do nothing, but the button still looks clickable. – acostache Jan 31 '13 at 10:59
1

@acostache using style="cursor:default;" should help with the pointer – John Jul 24 '13 at 13:00
4

The question was: "using CSS", so this is a good, but not the correct answer. – Roman Holzner Mar 19 '14 at 13:30
It's better to use css rather than onclick="return false" for 3 main reasons: 1- With css you can change the default link mouse cursor to the default arrow. 2- That's obtrusive js. 3- That's actually returning a value, you don't want to return false every time you click on the link. – Diego Unanue Jun 05 '14 at 15:33
"It's better to use css" - agree. However if you need to do something on hover - it's pointer event and you'd rather need this solution. – Constantine Ketskalo Oct 04 '22 at 13:30

score 12 · Answer 3 · answered Oct 11 '13 at 10:15

12

Yes.. It is possible using css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

answered Oct 11 '13 at 10:15

pown

1,118
1
16
27

This is the cleanest way, but one caveat: it's only supported on IE11+ [caniuse.com](http://caniuse.com/#search=pointer-events) – pixelfreak Jan 19 '15 at 19:59

score 8 · Answer 4 · answered Jul 18 '11 at 00:48

8

Or purely HTML and CSS with no events:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

answered Jul 18 '11 at 00:48

Paul

139,544
27
275
264

1

-1 because this is a pretty complicated/confusing way to solve the problem. It also doesn't really do what the question asks(make the link inactive). It just covers the link with an invisible element. Diego's answer is much cleaner. – developering Jun 27 '14 at 21:43
@developering I think Diego's answer is better as well and should be voted higher and accepted. However, when I wrote this answer (3 years ago) `pointer-events` had almost no browser support. – Paul Jul 04 '14 at 00:09
@Paulpro I sort of figured that was the case. Sorry for the downvote! Just want to make sure the most up to date answer is on top. Thanks for the response. – developering Jul 05 '14 at 02:46

score 6 · Answer 5 · answered Jul 18 '11 at 00:27

6

CSS was designed to affect presentation, not behaviour.

You could use some JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};

answered Jul 18 '11 at 00:27

alex

479,566
201
878
984

score 6 · Answer 6 · answered Jul 18 '11 at 00:27

6

A more un-obtrusive way (assuming you use jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

Javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

The advantage of this is the clean separation between logic and presentation. If one day you decide that this link would do something else, you don't have to mess with the markup, just the JS.

answered Jul 18 '11 at 00:27

pixelfreak

17,714
12
90
109

6

You know you could easily write non jQuery code to do the same thing that would run quite a bit faster: `document.getElementById('my-link').onclick = function(){ return false; };` – Paul Jul 18 '11 at 00:28
1

I think most people want (and should) use some sort of framework to ease development. The author did not specify any performance restriction, but jQuery minified and gzipped is only 31KB. I think the benefit far outweighs the cost. – pixelfreak Jul 18 '11 at 00:37
2

Seriously? What browser doesn't support onclick or getElementById. Okay, so IE 2 doesn't support onclick, but it also didn't support CSS... and I highly doubt your jQuery code there will work in IE 2 either. – Paul Jul 18 '11 at 00:40
1

The speed difference might be small, bt not if you can't jQuery library download time. I really don't think it's a good idea to use encourage use of jQuery when you don't need, because people become dependent on it and forget how to write Javascript without it. – Paul Jul 18 '11 at 00:42
4

@PaulPRO This discussion is moot without the author's requirements. Each framework has its purpose. If he's not fluent in JS and just doing a mom-n-pop website and needed to manipulate some DOM element, it'd much easier for him to use a framework. Your reluctance in using any framework is ridiculous. PHP is written in C. Does that mean you should write C and not use PHP? iOS has UIKit, Core Data, Quartz, etc. Flash has tons of commonly used 3rd party libraries. Again, each framework has its purpose. A purist, not-built-in-house mentality won't help anyone. – pixelfreak Jul 18 '11 at 00:48
1

I agree it is kind of moot though, but I don't think posting an answer with jQuery when the OP didn't say they were using jQuery to begin with makes sense, since they could have to include the while framework just for 3 lines of code in that case, and the non jQuery solution isn't any more complicated – Paul Jul 18 '11 at 00:51

score 2 · Answer 7 · answered Jul 18 '11 at 00:25

2

The answer is:

<a href="page.html" onclick="return false">page link</a>

answered Jul 18 '11 at 00:25

Doa

1,965
4
19
35

score 2 · Answer 8 · answered Aug 06 '21 at 12:09

2

As Simple you do. Put **javascript:void(0)** in href, And see the effect E.g.

<a href="javascript:void(0)">Demo</a>

No Css, No JS Required for this

answered Aug 06 '21 at 12:09

OSS Developers

31
1

score 1 · Answer 9 · answered Jun 01 '22 at 23:19

Questioner specifically asks for CSS solution but according to answers more lines needs to be added just to keep href='page.html'. To me correct approach should be adding onclick HTML attribute. Here is the solution;

<a style="" href="page.html" onclick="this.href=''">page link</a>

This way href link can be kept in coding for future usage.

score -1 · Answer 10 · answered Jul 24 '13 at 13:02

-1

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>

answered Jul 24 '13 at 13:02

John

877
4
11
19

There is no need to add a separate answer for this, your comment on the answer by @KaranK is enough, thought. Please avoid duplicated answers. – MAChitgarha Apr 27 '20 at 03:47

score -1 · Answer 11 · edited Jun 04 '21 at 03:20

-1

It can be done in CSS very simply. Change the "a" to a "p". Your "page link" does not lead to somewhere anyways if you want to make it unclickable.

When you tell your CSS to do a hover action on this specific "p" tell it this:

(for this example I have given the "p" the "example" ID)

#example
{
  cursor:default;
}

Now your cursor will stay the same as it does all over the page.

edited Jun 04 '21 at 03:20

Andrew

307
7
13

answered May 09 '15 at 23:16

Hollnder

1

Is it possible to make an HTML anchor tag not clickable/linkable using CSS?

11 Answers11

Linked