Question

当单击没有任何CSS样式的按钮时，该按钮会立即变为蓝色，然后恢复为正常的白色。

但是，当单击样式如下所示的按钮时，其周围会出现一个蓝色突出显示，并且直到单击屏幕上的其他内容时，它才会消失。

我希望我的按钮没有这个奇怪的蓝色突出显示。我该如何解决这个问题，并仍然保持按钮的样式？

到目前为止，我发现的所有解决方案都涉及javascript，但是我正在这里寻找纯CSS解决方案。

<html>
<head>
<style>

  button {
      border: solid #316A8F;
      border-radius: 12px;
      background-color: #F9F9F9;
      color: #003C63;
  }

</style>
</head>
<body>

<button>click me.</button>

</body>
</html>

Answer 1

它称为focus，请尝试以下操作：

button:focus {
    outline: none;
}

button {
      border: solid #316A8F;
      border-radius: 12px;
      background-color: #F9F9F9;
      color: #003C63;
  }
  
  button:focus {
    outline: none;
  }

<button>click me.</button>

如何更改CSS中单击按钮的动画？

1 个答案: