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

Question

我有一个 div 里面有一个 span 元素，它会有一个重定向功能。 div 有一个边界半径属性。所有的工作和 UI 看起来都很好。但是当元素被 selected 时，我看到 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

确保将 菜单按钮 class 的 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;
}

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

Removing box after a div with border-radius is selected

html

javascript

css

border-layout