html 去掉按钮焦点框,在Chrome中从css自定义样式按钮中删除蓝色边框

在Chrome中从css自定义样式按钮中删除蓝色边框

我正在做一个网页，我想要定制样式标签。因此，对于CSS，我说：border: none..现在它在Safari中运行得很好，但是在Chrome中，当我单击其中一个按钮时，它会在它周围放置一个恼人的蓝色边框。我以为button:active { outline: none }或button:focus { outline:none }会起作用的，但两者都不起作用。有什么想法吗？

这是单击之前的样子(以及我希望它在被单击后仍然保持的状态)：

这就是我说的边界：

这是我的CSS：button.launch {

background-color: #F9A300;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;}button.launch:hover {

cursor: pointer;

background-color: #FABD44;}button.change {

background-color: #F88F00;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;}button.change:hover {

cursor: pointer;

background-color: #F89900;}button:active {

outline: none;

border: none;}