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>

更新：出于可访问性原因，我无法使用outline：none。请参阅：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。

查看

的答案

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

Answer 4

您可以使用outline

设置焦点时设置按钮的:focus {outline: none;}属性

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

某些浏览器设置以下默认值

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

需要过度骑行：

.btn:focus {
  outline: none;
}

Answer 6

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

.btn{
   outline: none;
}

您需要知道的另一件事是：当你使用前。 .btn:active有效意味着点击按钮等操作。

您所要做的就是默认包含大纲，并在动作或焦点时删除它。

Answer 7

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

button:focus {outline:0;}

fiddle here

我认为有一种方法可以区分键盘输入或鼠标点击按钮focus，都会触发按钮的focus事件。

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

7 个答案: