当一个没有任何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>
这就是所谓的 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>