Stop anchors from acting like hyperlinks when disabled

Question

My anchor even after applying CSS styles to it when it's disabled still acts like hyperlink. Changes colour when hovered on.

I've spent some time on this already and almost giving up on this one. I want the magnifying glass to not change colour at all after hovering over it.

This is the anchor

 <a href="" class="postcode-search-icon clickable"
            ng-click="searchPostcode()" ng-disabled="true" title="Search Postcode">
 </a href="">

And my current CSS styles attempt to fix it

.postcode-search-icon[disabled], .postcode-search-icon[disabled]:hover {
   text-decoration: none;
   cursor: not-allowed;
   background-color: transparent;
}

What am I doing wrong?

In case you're wondering clickable class is just this so it doesn't matter

.clickable {
    cursor: pointer;
}

@edit

Looks like applying color: (original colour) makes a temporary workaround until I find something better.

Looks like there a way, shown here by using preventDefault https://stackoverflow.com/a/16788240/3254405 — boateng, Oct 01 '18 at 13:49
I believe there sholud be color too to change color when disabled — Güven Altuntaş, Oct 01 '18 at 14:18
@GüvenAltuntaş, I've searched for a potential colour change when disabled but couldn't find anything. I've even applied the same colour on disabled but it still makes that hyperlink feel... — LazioTibijczyk, Oct 01 '18 at 14:20
can you see your disabled rule in developer console? if you can see is this rule is dominant for links rule? if its not, changing selector can fix it. if rule is active while still changing, please check html element on developer console to check style attribute — Güven Altuntaş, Oct 01 '18 at 14:23

score 2 · Answer 1 · answered Oct 01 '18 at 13:50

2

It seems like your css selector is wrong. The disabled pseudo class only works with input fields and not with anchors.

input[disabled="disabled"], input.disabled {
    /* whatever you want */
}

Besides that, idk how you handle the addition of the clickable class, you need to handle that in order to not override styles.

answered Oct 01 '18 at 13:50

Cristian S.

937
5
13

How is cursor: not-allowed; applied properly to disabled anchor but not the rest? – LazioTibijczyk Oct 01 '18 at 13:53
Hard to say without knowing the rest of the code, maybe is being overwritten somewhere else. Maybe your click is doing something weird.. idk. The only thing I can guarantee you is that the CSS is not correct http://jsfiddle.net/j5cz2g09/2/ – Cristian S. Oct 01 '18 at 14:04
This is behaviour on hover, I'm not even clicking the anchor. – LazioTibijczyk Oct 01 '18 at 14:09
You also using angular ng-disabled on the link which may be overwriting your css https://stackoverflow.com/a/43676839/3254405 – boateng Oct 01 '18 at 15:29

score 0 · Answer 2 · answered Oct 01 '18 at 19:57

If you are using Angular, you should be able to use a conditional class with the ngClass attribute. Not sure if you are using Angular 2, 3, 4, 5, or JS (here's the JS link for ng-class).

I think I would make the clickable item into a button, as well.

.bright:hover {
  color: #0066ff;
  cursor: pointer;
}

.dim:hover {
  color: #ccc;
  cursor: default;
}

<button ng-class="{bright: enabled, dim: disabled}"><i class="search-icon"></i> Search</button>

Stop anchors from acting like hyperlinks when disabled

2 Answers2