What is the best way to prevent the irritating grey background that appears on anchors in IE 10 when they are clicked?
What is the best way to prevent the irritating grey background that appears on anchors in IE 10 when they are clicked?
If you're dealing with the pesky issue of IE 10 changing the background-color of anchor tags in the :active state, fear not! There's a simple CSS fix for that. Just add the following rule to your stylesheet:
a:active{
background-color: transparent; /* You can use any color here */
}
Check out this live demo to see it in action: http://jsfiddle.net/tw16/NtjK7/
And a quick tip: when styling links, make sure to write your rules in the correct order to prevent styles from being overwritten:
a:link{} /* 1st */
a:visited{} /* 2nd */
a:hover{} /* 3rd */
a:active{} /* 4th */
After some investigation, I discovered that it was the :focus pseudo-class that caused the grey background.
Here is the solution that worked in my case:
a:focus {
background-color: transparent;
}
After thorough research, I stumbled upon a useful solution:
Enclose the text of the anchor within a span
If you prefer not to alter every anchor tag in your HTML code, you can utilize a script similar to this one:
$("a:not(.dont-use-span)").each(function() {
$(this).html("<span>" + $(this).html() + "</span>");
});
Remember: simply assign the class dont-use-span to the anchors that should remain unchanged
After numerous unsuccessful attempts, I finally got it to work using the following code:
a {color:#fff; background-color:#f77927 !important;}
a:hover {color:#fff; background-color:#e65e06 !important;}
a.active {color:#fff; background-color:#e65e06 !important;}
a.focus {color:#fff; background-color:#e65e06 !important;}
Hey there! I'm currently working on a school project and I'm aiming to implement a drop-down menu. Surprisingly, it's proving to be more challenging than expected. <div class="parrent"> <div class="row"> ...
Currently, I am working with React 17 and MUI version 5.6. My component requires the ability to dynamically add new borders to the parent container based on user input. While I have come across CSS tutorials that demonstrate how to achieve this effect usin ...
Within my wordpress page, there is a specific link present. This particular link belongs to a class. Is it viable to deactivate this link solely through the use of CSS? <a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="mater ...
Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...
I've been attempting to modify the background color of my Angular Material Dialog by utilizing the panelClass property in the MatDialogConfig. Unfortunately, I'm encountering a partial success. I am aiming to set the background color as red (jus ...
Currently, I am experimenting with CSS3 and creating bubble shapes. However, I have encountered an issue. I am trying to create a triangle with a 1px border, but the result is a thicker triangle than desired. You can view my code on this fiddle : FIDDLE ...
I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...
The alignment of the list element is off-center in Internet Explorer, whereas in Chrome it is perfectly centered. Below is a snippet of the code being used with the Bootstrap CSS Framework. Here is the JSfiddle https://jsfiddle.net/8cunpsvy/ ...
It's a bit complicated, but I'm working on creating a tag system. I'm fetching data from a database with an AJAX call using the "@" symbol. Everything is working fine - the tags are being generated, but I'm having trouble retrieving and ...
I'm encountering a problem with a website I'm currently developing - specifically, I am struggling to embed an HTML document into an iframe in a manner that fills the entire page. Additionally, I am utilizing Angular to retrieve the HTML document ...
I'm looking to enhance my website by adding a unique feature - a dynamic banner that showcases various images from a specific picture pool. However, I'm unsure of how to find the right resources or documentation for this. Can you provide any guid ...
I've experimented with the following code: @font-face { font-family: Jua; src: url('/fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('..../fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('.../fonts/jua.t ...
I'm in the process of creating a script that can generate fonts from SVG images, and so far it's been successful (using similar code to what's provided on https://www.npmjs.com/package/gulp-iconfont) Now I have a more specific question - is ...
I'm facing an issue with integrating a .jsx file into my website. I tried testing it on a single-page demo site, but nothing is showing up. Can someone guide me through the steps to successfully integrate it onto my site? I've also attached the . ...
I've been trying to position my image all the way to the right of the page using CSS properties like position: absolute and right: 0. I've also attempted setting the parent element's position to relative and the image's position to abso ...
Recently, I coded a small JavaScript program with the purpose of: incrementing or decrementing the quantity of an item by 1 adjusting the price of an item based on the initial price However, my excitement turned to disappointment when I encountered these ...
The navigation bar and footer on my HTML page adjust themselves according to the screen width, but the main content is not adjusting properly. I tried using a media query for mobile resolution (517px), but when I tested it on a PC with a smaller screen wi ...
I'm experimenting with HTML5/CSS3 for the first time and have implemented a cool little link to display a dialog (modal) on one of my web pages. While this works perfectly in Chrome/Firefox, it unfortunately doesn't function properly in Internet ...
I am currently working on a Single Page Application using Vue. The default layout consists of some HTML in the header, followed by an abstract child component that is injected into the page. Each child component has a loader to display while the data is be ...
Wondering how to manage Foundation4 modals with AngularJS? I've noticed that when I navigate from a modal to a new view, the old modal disappears but the page stays darkened as if it's still there in the background. I tried adding a class attribu ...