Default buttons don't show outline styles on click

Question

Why do the default buttons don't show any outline styles on click but the custom button shows a outline style on click?

How do I remove the outline styles from a custom button on click but keep the outline styles when the users uses the keyboard to navigate to it (same behavior like the default buttons)?

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

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

UPDATE: I can't use outline: none for accessibility reasons. Refer: http://www.outlinenone.com/

You can fix this with JS using `blur`. I'm guessing that the user agent is responding to browser events and is removing the focus for default styled elements and not for custom styled elements (at least for certain properties). — hungerstar, Sep 06 '16 at 22:12

score 2 · Accepted Answer · answered Sep 06 '16 at 22:08

2

If you're concerned about accessibility, then why do you want to remove the outline?? It would be perfectly ok for accessibility by the way to remove the outline but add a different style: background-color, color or border for instance.

answered Sep 06 '16 at 22:08

Wim Mertens

1,780
3
20
31

An example of this: in the SO snippets, the "run code snippet" and "copy snippet to answer" buttons and the "hide results" link get the `:hover` styles on `:focus`. Don't know enough about the WCAG to know if that style change is considered obvious enough (and the "expand snippet" link isn't tab-selectable!) but anyway that's one illustration – henry Sep 07 '16 at 16:24

score 2 · Answer 2 · edited May 23 '17 at 11:55

Taken and edited from a previous question here:

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

You can do this via js

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>

This will show an outline only when a user has tabbed, not clicked the button.

score 1 · Answer 3 · edited May 23 '17 at 10:29

1

You'll need to use javascript to differentiate between focus that comes from a click and focus that comes from a keypress.

Check out the answers to

A bunch of good options there - assuming you're able to add js to this page, you'll find one that works for you

edited May 23 '17 at 10:29

Community

1
1

answered Sep 06 '16 at 22:17

henry

4,244
2
26
37

Though keep in mind that not every person who benefits from web accessibility will be navigating by keyboard. If you want this page to be accessible, the `:focus` should be shown in *some* way (see @wim-merten's answer). And careful if you're working under a web accessibility policy: it's possible that not showing the `:focus` would be a policy violation – henry Sep 07 '16 at 16:20

score 0 · Answer 4 · answered Sep 06 '16 at 21:47

0

You can set the outline attribute of the button while focused using :focus {outline: none;}

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

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

answered Sep 06 '16 at 21:47

Dekel

60,707
10
101
129

i cant use outline none for accessibility reasons – takeradi Sep 06 '16 at 21:50

score 0 · Answer 5 · answered Sep 06 '16 at 21:50

0

Some browsers set the following default,

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

and needs to be over ridden:

.btn:focus {
  outline: none;
}

answered Sep 06 '16 at 21:50

Okomikeruko

1,123
10
22

cant use outline: none for accessibility reasons – takeradi Sep 06 '16 at 21:50
You can't access your css? – Okomikeruko Sep 06 '16 at 21:51
@Okomikeruko removing the outline is a bad practice for accessibility reasons. Some users can't use a mouse and use a keyboard only. The outline lets them know what element has focus and can perform an action. Without an outline it's all a guess to those users what will happen when they tab and then hit _Enter_. – hungerstar Sep 06 '16 at 22:17
Then how about some JavaScript so the outline is only missing when clicked and not tabbed to: http://stackoverflow.com/questions/32046375/why-pseudo-element-focus-on-button-when-using-tab-but-not-click – Okomikeruko Sep 06 '16 at 22:33

besartm · Answer 6 · 2016-09-06T21:51:26.140

0

You can remove outline by including:

.btn{
   outline: none;
}

Another thing that you need to know is: When you use ex. .btn:active active means on action like clicking the button.

All you have to do is include outline by default and remove it on action or focus.

edited Sep 06 '16 at 21:51

answered Sep 06 '16 at 21:50

besartm

558
1
7
14

cant use outline: none for accessibility reasons – takeradi Sep 06 '16 at 21:50

score 0 · Answer 7 · answered Sep 06 '16 at 21:57

0

I am not sure what do you mean by accessibility, but if you wan to remove the outline you need to use

button:focus {outline:0;}

fiddle here

I don't think there is a way to differentiate, focus on button by keyboard input or mouse click, both trigger the focus event of the button.

answered Sep 06 '16 at 21:57

Arjun

226
5
20

The focus remains on the custom button but not on the default styled button. OP wants to fix that. Your solution removes the focus when tabbing to the custom button. – hungerstar Sep 06 '16 at 22:04
"Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging." More at https://www.w3.org/WAI/intro/accessibility.php An important issue in general, and one that's on its way to becoming a part of more developers lives as more and more large institutions add web accessibility policies – henry Sep 07 '16 at 16:13

Default buttons don't show outline styles on click

7 Answers7