By default, buttons do not display outline styles when clicked

Question

By default, buttons do not display outline styles when clicked

What is the reason default buttons do not display outline styles when clicked, while custom buttons do show an outline style on click?

Is it possible to remove the outline styles from a custom button on click while maintaining the outline styles when users navigate to it using the keyboard (similar to default buttons)?

.btn {
  display: inline-block;
  padding: 12px;
  background: cyan;
  border: none;
}

<div>
    <button type="button">Why are there no outline styles on click?</button>
</div>
<div style="margin-top: 24px">
    <button class="btn">Why do outline styles appear on click?</button>
</div>

UPDATE: I am unable to use outline: none for accessibility reasons. Reference:

html css

Answer 1

Answer №1

While considering accessibility, have you thought about keeping the outline rather than removing it? You could enhance accessibility by replacing the outline with a different style such as background-color, color, or border.

Answer 2

While considering accessibility, have you thought about keeping the outline rather than removing it? You could enhance accessibility by replacing the outline with a different style such as background-color, color, or border.

Answer 3

Answer №2

Extracted and altered from a previous inquiry found here:

Reason behind pseudo element :focus on button when using TAB but not click?

This can be accomplished with the use of JavaScript

var submit = document.getElementById("submit");

var tabbing = false;

window.onkeyup = function (e) {
    if (e.keyCode == 9) {
        tabbing = true;
    }
}

submit.onfocus = function (e) {
    if (tabbing) {
        this.classList.add("tabbed");
    }
};

submit.onblur = function () {
    this.classList.remove("tabbed");
    tabbing = false;
};

#submit.tabbed:focus {
    outline: 2px solid green;
}

#submit{
  display: inline-block;
  padding: 12px;
  background: cyan;
  border: none;
  }

#submit:focus{
  outline: none;
  }

<label>Name:</label>
<input type="text" />
<br>
<label>Pass:</label>
<input type="password" />
<br>
<label>Save Password:</label>
<input type="checkbox" />
<br>
<br>
<button id="submit">Submit</button>

An outline will only be displayed when the user tabs, not clicks on the button.

Answer 4

Extracted and altered from a previous inquiry found here:

Reason behind pseudo element :focus on button when using TAB but not click?

This can be accomplished with the use of JavaScript

var submit = document.getElementById("submit");

var tabbing = false;

window.onkeyup = function (e) {
    if (e.keyCode == 9) {
        tabbing = true;
    }
}

submit.onfocus = function (e) {
    if (tabbing) {
        this.classList.add("tabbed");
    }
};

submit.onblur = function () {
    this.classList.remove("tabbed");
    tabbing = false;
};

#submit.tabbed:focus {
    outline: 2px solid green;
}

#submit{
  display: inline-block;
  padding: 12px;
  background: cyan;
  border: none;
  }

#submit:focus{
  outline: none;
  }

<label>Name:</label>
<input type="text" />
<br>
<label>Pass:</label>
<input type="password" />
<br>
<label>Save Password:</label>
<input type="checkbox" />
<br>
<br>
<button id="submit">Submit</button>

An outline will only be displayed when the user tabs, not clicks on the button.

Answer 5

Answer №3

To distinguish between focus triggered by a click and that triggered by a keypress, JavaScript will be necessary.

For more information, you can refer to:

Determine what triggered focus event?
Differentiate between focus event triggered by keyboard/mouse
Detect focus initiated by tab key?

There are various suggestions in those links - if you have the ability to include JavaScript on this page, you'll likely find a solution suitable for your needs.

Answer 6

To distinguish between focus triggered by a click and that triggered by a keypress, JavaScript will be necessary.

For more information, you can refer to:

Determine what triggered focus event?
Differentiate between focus event triggered by keyboard/mouse
Detect focus initiated by tab key?

There are various suggestions in those links - if you have the ability to include JavaScript on this page, you'll likely find a solution suitable for your needs.

Answer 7

Answer №4

To remove the outline attribute of a button when focused, you can use the following CSS rule: :focus {outline: none;}

.btn {
  display: inline-block;
  padding: 12px;
  background: cyan;
  border: none;
}
.btn:focus {
  outline: none;
}

<div>
    <button type="button">Why does the outline disappear on click?</button>
</div>
<div style="margin-top: 24px">
    <button class="btn">Why does the outline appear on click?</button>
</div>

Answer 8

To remove the outline attribute of a button when focused, you can use the following CSS rule: :focus {outline: none;}

.btn {
  display: inline-block;
  padding: 12px;
  background: cyan;
  border: none;
}
.btn:focus {
  outline: none;
}

<div>
    <button type="button">Why does the outline disappear on click?</button>
</div>
<div style="margin-top: 24px">
    <button class="btn">Why does the outline appear on click?</button>
</div>

Answer 9

Answer №5

Default settings for certain browsers include the following:

:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

However, these defaults may need to be overridden as follows:

.btn:focus {
  outline: none;
}

Answer 10

Default settings for certain browsers include the following:

:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

However, these defaults may need to be overridden as follows:

.btn:focus {
  outline: none;
}

Answer 11

Answer №6

To eliminate the outline, simply add this snippet of code:

.button{
   outline: none;
}

It is important to remember that when you use .button:active, "active" refers to an action being taken, such as clicking the button.

The key is to have the outline present by default and then remove it during actions or focus events.

Answer 12

To eliminate the outline, simply add this snippet of code:

.button{
   outline: none;
}

It is important to remember that when you use .button:active, "active" refers to an action being taken, such as clicking the button.

The key is to have the outline present by default and then remove it during actions or focus events.

Answer 13

Answer №7

Uncertain about your question regarding accessibility, but if you want to eliminate the outline, simply add this code:

button:focus {outline:0;}

Check out the demo here

No apparent method to distinguish between focus on a button by keyboard input or mouse click, as both actions trigger the button's focus event.

Answer 14

Uncertain about your question regarding accessibility, but if you want to eliminate the outline, simply add this code:

button:focus {outline:0;}

Check out the demo here

No apparent method to distinguish between focus on a button by keyboard input or mouse click, as both actions trigger the button's focus event.

By default, buttons do not display outline styles when clicked

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Adjust and resize video backgrounds within parent elements on iframes

Opting for CSS3 transitions over jQuery animate

Is there a way to set the canvas size to match the exact window size in pixels without being affected by the browser's zoom factor?

How to update data in FullCalendar using Bootstrap modal

Refresh an iframe using Javascript

How can I implement horizontal scrolling on a material-ui table containing numerous columns?

Emphasize an element when hovering over it

Is it possible to include line breaks within a CSS value?

Delete the element that was generated using jQuery

Switching the parameter to navigate to the appropriate page

Having trouble adjusting the width of the text input in the inline search box form with an input group dropdown

I'm having difficulty grasping the concept of creating a responsive design

How can I adjust the gravity or positioning of a tipsy tooltip in jQuery?

Steps for accessing the value from an input tag within the same form:

Can 3D objects be easily moved by dragging and dropping in sap ui5?

Tips for resolving the issue of "Unable to assign property '_DT_CellIndex' to undefined in Jquery Datatable"

The functionality of Css translate is not functioning as expected

Ways to dynamically set a background image URL using solely HTML and CSS

Error in Compiling HTML Elements Collection<<Element>

What is preventing the audio from playing in Safari?