Is it possible to remove an a href tag using CSS?

Question

I have code here that i want to make the a href unclickable through CSS:

<div id="header" 
     style="background: url(/uploads/header/derivativesheader.gif)" 
     class="header-link">
  <h1 id="logo" class="notext">
    <a href="/">Title</a>
  </h1> 
</div>

I cannot remove the hard coded href tag, but want to know if I can overwrite it's action using a CSS hack.

better to do it with jquery. CSS should be left for presentation elements. — Brian, Jun 11 '12 at 15:45
do you want to make it unclickable by default or after a javascript function?? — shahbaz, Jun 11 '12 at 15:46
pls someone close it http://stackoverflow.com/questions/2091168/disable-a-link-using-css — island205, Jun 11 '12 at 16:25
@Brian - as much as I love jquery (and I really do), it is a lot of overhead. If you're looking for a simple css hack and one exists, better to stick with that than use jquery. — Zachary Kniebel, Sep 27 '12 at 11:56

score 9 · Answer 1 · answered Jun 11 '12 at 15:50

9

You can prohibit the click event with the pointer-events property: http://jsfiddle.net/NnEXn/

answered Jun 11 '12 at 15:50

Jona

2,087
15
24

This is what my answer would had been. – Matthew Riches Jun 11 '12 at 15:54
@Jona - this is a cool solution, but a bit ahead of its time. I STRONGLY ADVISE AGAINST THIS SOLUTION at present, as the 'pointer-events' property is not standard, not very widely supported, and it is a property CSS4 (not a typo). It was supposed to be included in css3, but was postponed to CSS4 due to the amount of bugs (probably the best reason not to use it) – Zachary Kniebel Sep 27 '12 at 12:01

score 2 · Answer 2 · answered Jun 11 '12 at 15:46

Remove no. Hide yes.

#logo a { 
    display: none;
}

However, this is probably not the desired result as it will also hide the inner content of the anchor (i.e. Title). As such, a JavaScript solution may be better suited. But to answer the question, this is a way using only CSS.

score 2 · Answer 3 · answered Sep 26 '12 at 18:17

2

<a href="/" class="hide">

.hide {
   visibility: hidden;
}

This will prevent the clickable action

answered Sep 26 '12 at 18:17

Ben Sewards

2,571
2
25
43

Good solution - maintains the flow of the DOM, but you lose the link's rendering. – Zachary Kniebel Sep 27 '12 at 12:02
Also, Why have an anchor tag if you don't want to utilize the href property event? I guess if you wanted this element for the purpose of being able to store the href property in the DOM, bingo. – Ben Sewards Sep 27 '12 at 13:47
Were he able to change the href, I would say that he probably just wants the pointer cursor, but I don't think that's the case here. – Zachary Kniebel Sep 27 '12 at 13:51

score 1 · Answer 4 · answered Jun 11 '12 at 15:46

1

I don't think this is possible (pure CSS). The only way I know of to make a link not clickable is to position another element over the link (zindex, still pure CSS), and be transparent so that the higher element is clicked and not the link.

answered Jun 11 '12 at 15:46

Erik Philips

53,428
11
128
150

score 0 · Answer 5 · answered Sep 27 '12 at 12:06

Perhaps you cannot do this (as you said you cannot remove the hard-coded tag), but if you can add elements to the DOM, I would simply add a duplicate link with no href and set the other to 'display:none'. This will preserve the flow of the page, and the visual rendering of the link.

Is it possible to remove an a href tag using CSS?

5 Answers5