默认按钮在单击时不显示轮廓样式

Question

为什么默认按钮在单击时不显示任何轮廓样式，而自定义按钮在单击时显示轮廓样式？

如何在单击自定义按钮时删除轮廓样式，但在用户使用键盘导航到它时保留轮廓样式（与默认按钮相同的行为）？

.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>

更新：出于可访问性原因，我不能使用大纲：无。参考：http://www.outlinenone.com/

Answer 1

如果您担心可访问性，那么为什么要删除大纲？通过删除轮廓但添加不同样式的方式来实现可访问性是完全可以的：例如background-color、color 或border。

Answer 2

取自前一个问题并在此处编辑：

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

你可以通过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>

仅当用户选择了选项卡而不是单击按钮时才会显示大纲。

Answer 3

您需要使用 javascript 来区分来自点击的 focus 和来自按键的 focus。

查看答案

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

那里有很多不错的选项 - 假设您能够将 js 添加到此页面，您会找到适合您的选项

Answer 4

您可以使用:focus {outline: none;} 设置焦点时按钮的outline 属性

.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>

Answer 5

一些浏览器设置了以下默认值，

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

并且需要被覆盖：

.btn:focus {
  outline: none;
}

Answer 6

您可以通过包括以下内容来删除大纲：

.btn{
   outline: none;
}

您需要知道的另一件事是： 当你使用前。 .btn:active active 表示点击按钮等动作。

您所要做的就是默认包含大纲并在操作或焦点时将其删除。

Answer 7

我不确定你所说的可访问性是什么意思，但如果你想删除你需要使用的大纲

button:focus {outline:0;}

fiddle here

我认为没有办法区分，focus on button 通过键盘输入或鼠标点击，都触发了按钮的focus 事件。