Getting rid of the outline on <html> while tabbing in Firefox

An odd outline keeps appearing as I tab through elements on a website, but only in Firefox and not in Chrome, Safari, or Opera.

To identify the element causing the focus, I used Firebug console by typing: document.activeElement. It showed:

>>> document.activeElement

<html>

I then tried using CSS to remove the outline with:

html {outline: 0}

Unfortunately, the outline persisted. How can I eliminate it?

p.s: I tested tabbing through other websites like Google and Facebook, and did not encounter this type of outline.

htmlcssfirefoxtabsoutline

Answer №1

your answer is ready

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

Answer №2

UPDATE: It appears there was some confusion in my previous explanation, so let me clarify:

Because there is only the <body> element, Firefox can only focus on <body>, hence the dotted line around it. (see screenshot)

To test this, add an element or multiple elements to the body:

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='haha.css'>
    </head>
    <body>
        <a href="#" title="">I'm just an example.</a>
        <a href="#" title="">Me too.</a>
    </body>
</html>

You can now cycle through the elements using the tab key and observe the dotted line moving to the active element.

ORIGINAL MESSAGE

If you are seeking a border effect, you may want to use border instead.

html {
    border: none;
}

Depending on the existing CSS styles on the page, you might need to apply this:

html, body {
    border: none;
}

I hope this clears things up for you.

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

What is the reason behind the success of this location?

Curious about the functionality of this particular JavaScript code with its corresponding HTML structure: function getCityChoice() { const location = document.querySelector("form").location.value; console.log(location) } <form name="reserve" a ...

javascripthtml

Getting rid of the excess white space below the footer caused by concealed elements

In my design, I have three columns. The rightmost column is filled with 'Divs' containing collapsed information that can be scrolled through using the mouse wheel. The overflow in the center is hidden. The width of all three columns is set to 760 ...

htmlcss

Alter the font color of text using JavaScript in an HTML document

I am struggling to change the title color in my HTML code below, but the text color does not seem to be changing. How can I make this adjustment? /** * Generate a HTML table with the provided data */ Highcharts.Chart.prototype.generateTable ...

javascripthtmlcolors

Switch webpage HTML content to XLS format

Hey folks, I'm a bit uncertain about my client's requirements but thought sparking a conversation might help. My client is looking to extract HTML data from a webpage and convert it into an XLS format. The content is all sourced from their own w ...

c#.nethtmlxls

How can I create responsive buttons with icons using material-ui?

I'm working with a material-ui Button that has a startIcon, and I need to hide the button text on smaller screens while still showing the icon. One common solution would be to use the useMediaQuery hook to identify the browser size and render a diffe ...

cssreactjsmaterial-ui

When attempting to use the .split method, an error is thrown stating that addEventListener is not

I'm attempting to create a table that automatically fills in the next input when I select options from MySQL. However, when I run this code, I get an error saying "addEventListener is not a function." I'm not very familiar with JavaScript, so I&a ...

javascriptphphtml

encountered net::ERR_EMPTY_RESPONSE while attempting to locate a CSS file within an AngularJS directive

Every time my webpage attempts to access the css file from a directive, I encounter a net::ERR_EMPTY_RESPONSE. I have implemented door3's on-demand css feature, which allows for lazy loading of css files only when necessary. This feature works flawle ...

javascriptjqueryhtmlcssangularjs

Guide to triggering an event when two distinct keys are pressed simultaneously (Using HTML5 and Javascript)

I'm looking to have my character jump whenever I press any key on the keyboard. Is there a method to achieve this using "case..." functions? Thanks! Jordan ...

javascripthtmlcanvashtml5-canvaskeyevent

"Creating Eye-Catching CSS Animation Effects with Dynamic Initial States

I am looking to understand how I can seamlessly transition from a hover-triggered animation to an exit-hover animation, regardless of where the hover animation is in progress. Currently, if I exit hover too quickly, the animation jumps back to its starting ...

jquerycssanimation

When floating divs with varying heights are wrapped, they may become stuck in place

Hey there! Let's tackle a challenge: I've got a few divs, each with varying heights. These divs contain portlets that can expand in height. Here's a basic example: .clz { float: left; } <div class="container"> <div class="cl ...

htmlcssheight

Utilizing PHP and HTML to pull various values from a single select option

Is there a way to retrieve multiple values from a single select option value? Here is an example: <html> <form method="post" action="#"> <select name="retrive_destination"> <?php while($row = mysql_fetch_assoc($result)){ ...

phphtmlmysqlarrays

Scripting in jQuery to create dropdown menus

I've encountered a unique issue on my website where a user's selection from one list should update the values in another list: <form id="form1"> <div> <select id="workField"> <option value ...

javascriptjqueryhtmljquery-mobile

Text overlay on Material UI Card

I am currently using the Material UI Card and CardMedia components in my application, but I am having trouble with overlaying text on top of the image. Below is a simplified version of what I have been attempting: <Card> <CardMedia image={this. ...

cssreactjsoverlaymaterial-ui

Accessing video durations in Angular 2

Can anyone help me with retrieving the video duration from a list of videos displayed in a table? I attempted to access it using @ViewChildren and succeeded until encountering one obstacle. Although I was able to obtain the query list, when attempting to a ...

htmlangulartypescript

"Modifying the height of an SVG <g> element: A step-by

Is there a way to adjust the height of a g element? Trying to set the height using {params} but it's not responding I made some changes in the comments because the svg is quite large (Scene.js) {/* Transformation */} <g transform="trans ...

javascriptcssreactjssvg

Can you save a reference in a context within React?

Looking for a way to achieve global app-wide accessibility to a VideoElement in order to play it on user events in browsers like Safari. I am considering storing the VideoElement in a context as a potential solution. Currently, I am faced with the limitati ...

htmlreactjs

Prevent the collapse functionality in a Material-UI Stepper component

Currently in the development phase of a React website using Material-UI, with a focus on incorporating the Stepper component. Is there a method available to prevent the collapse and expansion of each individual StepContent in a vertical Stepper? The goal ...

htmlreactjsmaterial-ui

Creating dynamic visual representations on a website by generating real-time graphs

Every minute, new data is added to my csv file. I would like to display this data as graphs on a webpage. The file contains 12 parameters and I am interested in creating charts that show the relationship between each parameter and time. ...

htmlchartshtml5-canvas

AngularJS button click not redirecting properly with $location.path

When I click a button in my HTML file named `my.html`, I want to redirect the user to `about.html`. However, when I try using `$location.path("\about")` inside the controller, nothing happens and only my current page is displayed without loading `abou ...

javascripthtmlangularjsnode.js

Troubleshooting a CSS problem on a table filled with images - See attached screenshots for

I've been working on a project involving my phpmyadmin database generating a series of 6 images on my website. I've placed them in a table, but now I'm facing some challenges - even though it seemed simple at first! The goal is to display t ...

htmlcsscss-tables