How to Remove Firefox&#039;s Dotted Outline on Buttons and links using CSS ? - Coding

In Firefox browser, dotted outline appears around the buttons, links as well as inputs. The ability to tell which piece is now in focus makes this outline useful for people who browse the web using a keyboard. This is a feature of Firefox’s accessibility tools, which seek to make it simpler for users to navigate online pages using keyboard shortcuts or assistive technology. The dotted outline aids visitors in determining which part is the main emphasis and can also assist them to comprehend how the web page flows. But if you still want to get rid of this outline, you may accomplish so with CSS.

The color in Firefox 3 is decided by the text’s color. I think it was grey by default in earlier versions and in some other browsers. For accessibility, this is the default style. In Firefox 4, elements no longer show an outline by default when being clicked, but only when the keyboard focus.

Error: You will eventually get the dotted outline if you are using the older version of Firefox

the above gif shows the dotted outline in FireFox

Solution: Below are the ways to solve this issue:

For links: If you want every link to outline should be gone then include this part of the CSS in your style.css file

Syntax:

a:focus {
    outline: 0;
}
/* more specifically  */
a:hover, a:active, a:focus, a:link, a:visited {
    outline: 0;
    outline: 0 !important;
    outline-style:none;
}

It is advisable to use the standard outline design, however, there are a few situations when it is rather unpleasant and has to be disabled. One reason is that these outlines might be positioned quite oddly or even span the whole width of the screen if a page element is floating or utilizing a lot of padding.

For Firefox inputs:

Syntax:

input::-moz-focus-inner { 
    border: 0; 
}
/* More specifically  */
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner{
    border: 0;
}

For buttons:

Syntax:

button::-moz-focus-inner {
    border: 0;
}

Remember that the “outline” CSS attribute is really used in this layout. With two significant exceptions, Outline and the “border” property are quite similar. One, you may not be explicit about sides and the outline runs all the way around the item (similar to using a simple “border”). No such thing as “Outline-left” exists. Second, the box model does not include the outline value. While the outline is not included in the box’s overall width calculation, the border is. This is crucial to prevent layouts from moving when the outline is applied and withdrawn.

Example: In this example, we will see how to remove the outline.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link rel="stylesheet" href="style.css">
    <title>CSS Tutorial</title>
    <style>
        .main {
            margin-left: 50px;
        }

        .heading {
            color: green;
            font-size: larger;
            font-weight: normal;
        }

        a:focus {
            outline: none;
        }

        button::-moz-focus-inner {
            border: 0;
        }

        input {
            outline: none;
        }

        input::-moz-focus-inner {
            border: 0;
        }
    </style>
</head>

<body>
    <div class="main">
        <h2 class="heading">welcome to geekforgeeks</h2>
        <p>enter name:<input type="text"></p>
        <button>start learning</button><br><br>
        <a href="#">surf through geekforgeeks</a>
    </div>
</body>

</html>

Output:

After applying all the conditions you will get rid of the Dotted outline

Conclusion:

The dotted outline in Firefox may be eliminated with CSS or JavaScript, to sum up. Even while it’s crucial to take accessibility into account when creating and designing websites, there are some circumstances in which doing so may be beneficial or required. By utilizing these methods, you may modify the look and feel of your web pages to better meet your requirements and preferences.

Reffered: https://www.geeksforgeeks.org

CSS

Related
Can we use Padding Negative in Tailwind CSS ?
How to Add New Colors in Tailwind CSS ?
What are Accessibility Concerns in CSS ?
How to Select the Next Element in CSS ?
How to use Animation and Transition Effects in CSS ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14