CODEWITHSUNDEEP
htmlcssanchor
LazioTibijczyk
LazioTibijczyk

Reputation: 1957

Stop anchors from acting like hyperlinks when disabled

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

enter image description here enter image description here

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.

Upvotes: 0

Views: 99

Answers (2)

Yvonne Aburrow
Yvonne Aburrow

Reputation: 2728

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>

Upvotes: 0

Cristian S.
Cristian S.

Reputation: 973

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.

Upvotes: 2

Related Questions