选择具有边框半径的div后删除框

Question

我有一个带有span元素的div，它将具有重定向功能。 div具有border-radius属性。 所有的工作和用户界面都很好。 但是，当选择元素时，将在div周围看到一个边框。

由于重定向之前只有一分钟，所以我无法跟踪可能是CSS的问题。

这是我的代码：

HTML：按钮文字

CSS：

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
}

这是select上的div在移到其他页面之前的样子：

任何帮助，将不胜感激。

Answer 1

设置菜单按钮的轮廓属性。 像这样

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
    outline:none;
}

Answer 2

确保将菜单按钮类的outline设置为none 。 即， outline: none; 。

这是由于button元素的某些默认值而发生的。 例如，在Google Chrome浏览器上， outline是一个标准的蓝色边框，用于突出显示您当前所在的位置。

因此，通过设置outline: none; 单击button元素时，将删除任何border 。

---

这也适用于input元素，以供将来参考。

Answer 3

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
    border:none;
}