How to disable a link using CSS?

Question

I have the following link in a wordpress page.

This class is a link. Is it possible to disable the link using only CSS?

<a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="material-icons select-slot__serviceStaffOrLocationIcon___3WFzp">timelapse</i><span class="select-slot__serviceName___14MHL">Employee Assistance Line</span></a>

score 1 · Accepted Answer · answered Jul 17 '19 at 12:29

1

You could do something like this:

.select-slot__serviceStaffOrLocationButton___5GUjl {
  pointer-events: none;
  color: black; (the color which is your normal text maybe?)
}

answered Jul 17 '19 at 12:29

Tommy

789
8
23

score 0 · Answer 2 · answered Jul 17 '19 at 12:30

Use pointer-event:none;.

.select-slot__serviceStaffOrLocationButton___5GUjl{
  pointer-event:none;
}

<a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="material-icons select-slot__serviceStaffOrLocationIcon___3WFzp">timelapse</i><span class="select-slot__serviceName___14MHL">Employee Assistance Line</span></a>

score 0 · Answer 3 · answered Jul 17 '19 at 12:33

.select-slot__serviceStaffOrLocationButton___5GUjl
{
pointer-events: none; 
}

Add this to css.

If you want to show the link as a normal text use this.

 .select-slot__serviceStaffOrLocationButton___5GUjl
{
pointer-events: none; 
cursor: default; 
text-decoration: none; 
color: black; 
}

How to disable a link using CSS?

3 Answers3