Question

我正在尝试为按钮创建自定义大纲，而我正面临Chrome和IE以及Edge的问题。

请参阅此代码：http://codepen.io/alansouzati/pen/dXEWLB

.custom:focus {
  outline: black solid 2px;  
}

.custom:active,
.custom:hover,
.custom:visited {
  outline: 0;
}

在Safari和Firefox中，我得到了预期的行为。

要测试它，请单击第二个按钮（自定义焦点）。在IE和Edge中，即使我没有按Tab键，我也会得到大纲。在Safari和Firefox中，如果我按Tab键，则仅显示轮廓，而不是在我单击按钮时显示。

有关如何解决Chrome和IE的此问题的任何建议吗？

Answer 1

您可以在jQuery中使用.blur（）以避免在单击按钮后进行聚焦。

function myFunction() {
  alert('hi');
}

$(".custom").click(function(e) {
  $(this).blur();
  myFunction();
});

.custom:focus {
  outline: black solid 2px;  
}

.custom:active,
.custom:hover,
.custom:visited {
  outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="myFunction()">Default focus</button>
<br/>
<br/>
<button type="button" class="custom">Custom focus</button>

Answer 2

您的CSS可以简化为

.custom:focus:not(:active) {
  outline: black solid 2px;  
}

然后Edge会像Chrome一样渲染轮廓，这让我觉得问题与Edge中CSS selector specificity的处理有关。

更新了Codepen ：http://codepen.io/anon/pen/EgvYPR

但请注意，在您的示例中，当我使用鼠标单击第二个按钮然后在释放之前将光标移动到按钮外部时，即使没有按下Tab键，轮廓也会出现：所有浏览器中的行为相同。如果不是这样，我建议您切换到JavaScript解决方案。

IE和Chrome：css自定义大纲问题

2 个答案: