Turn off HTML hyperlinks in Internet Explorer

Question

Turn off HTML hyperlinks in Internet Explorer

I've been facing an issue in my application where I need to disable an HTML anchor using CSS. I found a solution on Stack Overflow that works perfectly in Chrome and Firefox. However, when I tried it in Internet Explorer, the link could not be disabled. I've searched through multiple resources but haven't found a solution for Internet Explorer yet. If anyone has a helpful link or answer, please assist. Thank you in advance.

http://jsfiddle.net/7EQJp/

<a href="link.html" class="active">Link</a>

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

html css internet-explorer

Answer 1

Answer №1

If you want to disable links using CSS, you can use the pointer-events property. However, it's worth noting that this method has some issues with Internet Explorer, although it is supported in IE 11 and above. One workaround is to add a disabled class and attribute to the links, and then apply the following CSS code provided below. Additionally, make sure to set pointer-events to none for the disabled anchor attribute to ensure it works correctly in most browsers.

a.disabled {
    pointer-events: none;
}

a[disabled] {
    pointer-events: none;
}

For a demonstration, check out this JSFiddle example.

Answer 2

If you want to disable links using CSS, you can use the pointer-events property. However, it's worth noting that this method has some issues with Internet Explorer, although it is supported in IE 11 and above. One workaround is to add a disabled class and attribute to the links, and then apply the following CSS code provided below. Additionally, make sure to set pointer-events to none for the disabled anchor attribute to ensure it works correctly in most browsers.

a.disabled {
    pointer-events: none;
}

a[disabled] {
    pointer-events: none;
}

For a demonstration, check out this JSFiddle example.

Answer 3

Answer №2

How to prevent links from being clicked using CSS:

a[disabled]{
pointer-events: none;}

Alternatively, you can also disable links using JavaScript:

$("td > a").attr("disabled", "disabled);

Answer 4

How to prevent links from being clicked using CSS:

a[disabled]{
pointer-events: none;}

Alternatively, you can also disable links using JavaScript:

$("td > a").attr("disabled", "disabled);

Answer 5

Answer №3

Originally, pointer events were exclusive to Mozilla, but have since been incorporated into -webkit-. Unfortunately, Internet Explorer has yet to adopt this feature, even with the introduction of Edge. It seems unlikely that IE will ever support it.

According to the MDN documentation:

Caution: The use of pointer-events in CSS for non-SVG elements is experimental. This feature was initially part of the CSS3 UI draft specification, but due to numerous unresolved issues, it has been pushed back to CSS4.

Answer 6

Originally, pointer events were exclusive to Mozilla, but have since been incorporated into -webkit-. Unfortunately, Internet Explorer has yet to adopt this feature, even with the introduction of Edge. It seems unlikely that IE will ever support it.

According to the MDN documentation:

Caution: The use of pointer-events in CSS for non-SVG elements is experimental. This feature was initially part of the CSS3 UI draft specification, but due to numerous unresolved issues, it has been pushed back to CSS4.

Answer 7

Answer №4

I have also encountered a similar issue and found a solution that worked for me in my code.

.disableButton {
    background: #e6eeee none repeat scroll 0 0;
    border: 2px solid #cdcdcd;
    border-radius: 20px/40px;
    color: #dcd7dc;
    cursor: pointer;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    image-rendering: inherit;
    padding: 5px 30px;
    pointer-events: none;
    text-decoration: none;
    display : inline-block;
   }

Answer 8

I have also encountered a similar issue and found a solution that worked for me in my code.

.disableButton {
    background: #e6eeee none repeat scroll 0 0;
    border: 2px solid #cdcdcd;
    border-radius: 20px/40px;
    color: #dcd7dc;
    cursor: pointer;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    image-rendering: inherit;
    padding: 5px 30px;
    pointer-events: none;
    text-decoration: none;
    display : inline-block;
   }

Turn off HTML hyperlinks in Internet Explorer

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Page jumping vertically in Chrome upon reload, with Firefox and Internet Explorer functioning properly

The function isset is not properly functioning when used with a submit button

What is the best approach to incorporate this D3.js HTML element into my AngularJS project for easy manipulation?

Is the default choice for the dropdown list set to Razor?

Sort div elements based on checkbox filters

Can we show the dropdown with the active button?

Using jQuery to modify the border of a particular row

The div needs to be positioned above another div, not beneath it

Using srcset and picture together to optimize images for various screen sizes

Incorporating OTP verification into the registration process

Clicking twice in a row on a map

Navigate down the page until you reach the section that is set to display as a block

CSS - Yet another perplexing question that shouldn't have arisen

Working with Basic Auth and Selenium Webdriver in Internet Explorer

Unable to display the content

Utilize a variety of trigger buttons to open a single modal window

Implementing a horizontal scrollbar for an AJAX datatable

Is there a way to position the image at the exact center of the column?

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

The browser does not support the display of Spanish special characters