Unable to eliminate border from a:active in Firefox version 3.5.3

I am attempting to prevent Firefox from adding an outline when links are clicked or followed (a:active).

I do not want to eliminate the outline on a:focus, because that would present a challenge for keyboard-only users.

In theory, the following solution should resolve this issue:

a:active { outline: 0; }

However, it seems to have no effect in Firefox 3.5.3.

The only method that actually works is:

a:focus { outline: 0; }

Unfortunately, this approach is not ideal for accessibility reasons.

Is there any way to specifically remove the outline when links are clicked? My concern is that clicking on a link technically focuses it, and it is the focus style that is being applied. Ideally, clicking and focusing should be considered as separate actions.

Answer №1

Check out these resources.

Alternatively, you can also try this one.

Answer №2

:active {outline:none;}
::-webkit-focus-inner {border:0;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Twitter Bootstrap navbar-collapse can be seen overlapping navbar-header section, causing a

I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable. As shown in the image below, the alpha logo has an href link but is not cli ...

Is there a way for me to view the contents within the box?

Hey there! I have a question about how to access the content inside this mysterious box "" within the style sheet. For instance, I am curious to find out the link of the image: .facebookicon::before { content: ""; } ...

How can we ensure that specific criteria are displayed once a selection is made?

Users have multiple options to choose from. When a user selects one option, I want to display additional options that are dependent on the initial selection. For example, if the user can select between 1 or 2 gates, upon choosing a number I will show all t ...

What's Causing the Truncation of Footer Designs?

In the footer, I have some social media links that are styled to appear as circles: While everything looks great on Chrome, I've noticed an issue on Safari where the last link seems to be getting "cut off", and I'm struggling to identify the cau ...

Issue with Chrome styling of li and a elements persists after link click

In my current project, I am facing an issue with my menu displaying differently in Firefox and Chrome. When clicking on the links in Chrome, they tend to move around, disrupting the styling of the menu. A common suggestion I found was to use display: block ...

The nested div within the ui-view element is failing to expand to the entire width of the window

I am facing a challenge in making a child div stretch to the entire width of the window, rather than just the width of its parent. I am incorporating AngularJS with UI-Router, and I'm not sure if that is causing the issue. Attached is a screenshot. ...

Ensuring a logo remains centered and stable even when the browser is resized

How can I ensure that this logo remains fixed at the center top of the page, without moving as the browser size changes? I want the logo to maintain its position and not recenter itself when the browser is resized. Below is my current CSS CSS #logo { p ...

Updating Button Text Upon Click

I am looking to create a webpage filled with riddles. After each riddle, there will be an answer button that, when clicked, reveals the answer. Clicking the button again should hide the answer. I attempted to implement this functionality using Javascript, ...

Positioning of the header that adapts and adjusts based

I created a header layout using bootstrap 4.5 https://i.sstatic.net/RhWrs.png <nav class="navbar navbar-expand-sm navbar-light"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="logo.pn ...

JavaScript-powered Chrome Extension designed for modifying CSS styling

Like many others, I've embarked on creating a Chrome Extension to modify the CSS of a specific webpage. Despite reading through various threads, my approach is a bit more complex than what has been discussed. The page I want to style features a sele ...

What is the best way to align inline-block elements in the center?

I'm looking for a way to center inline-block elements, but I haven't had much luck so far. When I tried using margin-top: x em;, it just moved the image down instead of centering it. The inline-block is intentionally nested inside an image block. ...

Generating a partially translucent image overlay

I am currently working on a one-page WordPress theme. Each section of the page includes a header with an image and an overlay. The header consists of a background image, with a wrap-width image inside. Below that, there is a semi-transparent png image tha ...

Hiding the Previous or Next Button on the First and Last Item in a Twitter Bootstrap Carousel

Is there a way to hide the previous button on the first item and hide the right button when the carousel reaches the last item? I've tried different solutions but couldn't get it to work. Any help in understanding how to implement this for a Boot ...

Adjusting containers for optimal display during browser zoom and resize operations

Currently, I have designed a banner using a triangle and rectangle to overlay an image. However, when the browser is zoomed in, there seems to be a gap between these two shapes. I am looking for suggestions on how to better connect or approach this banner ...

Modify button text when hovered over

Is it possible to modify the text color of "Contacte-nos" on hover? .popmake-contacte-nos { background-color: #fffff7; /* Green */ border: none; color: black; font-weight: bold; padding: 15px 32px; text-align: center; text-decoration: n ...

Achieve overlapping divs using the Grid Layout

My objective is to have the div overlap the next row(s) without pushing them down when it increases in size. I attempted to use position: absolute; but this caused issues with the Grid Layout structure. Preserving the shape of the grid is crucial to me ...

Filling a container div to its limit horizontally without exceeding its vertical boundaries

I'm currently developing a website that features a layout with two columns inside a container. The challenge I am facing is ensuring that the container's white background stretches to the bottom of the tallest column. To achieve this, I have impl ...

Customize your drop zone with React-dropzone styling

Hello! I am currently learning about reactjs and experimenting with creating a component that utilizes the functionality of react-dropzone. I have a question regarding how to customize the drop area's styling by overriding the default settings. At t ...

Do I have to use media queries if I've already specified width=device-width in my meta element?

Just a beginner question: If I'm creating a simple HTML template, nothing too complex. I include "width=device-width" in my meta element. Do I still need to incorporate media queries later on to guarantee that my template is responsive, or does incl ...

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

Greetings, after being a long-time reader, I have finally decided to post for the first time. In the process of creating a webpage with jQuery drag and drop divs, I am curious about how to change the class of a child div within a draggable div once it is d ...