当我点击其他地方的边界消失,我试图使用onfocus: none,但这没有帮助。如何使这个丑陋的按钮边界消失时,我点击它?
输入(type =按钮){ 宽度:120 px; 高度:60 px; margin-left: 35 px; 显示:块; 背景颜色:灰色; 颜色:白色; 边界:没有; } <input type="button" value="Example button" >
当我点击其他地方的边界消失,我试图使用onfocus: none,但这没有帮助。如何使这个丑陋的按钮边界消失时,我点击它?
输入(type =按钮){ 宽度:120 px; 高度:60 px; margin-left: 35 px; 显示:块; 背景颜色:灰色; 颜色:白色; 边界:没有; } <input type="button" value="Example button" >
当前回答
这比你想象的要简单得多。当按钮被聚焦时,应用outline属性,如下所示:
button:focus {
outline: 0 !important;
}
但是当我使用none值时,它对我不起作用。
其他回答
Chrome和FF中的焦点轮廓:
删除按钮焦点轮廓:
button,
input[type=button] {
outline: none;
}
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
border: 0;
}
/*
Accessibility (A11Y)
Don't forget! User accessibility is important
*/
button:focus,
input[type=button]:focus {
/* your custom focused styles here */
}
这对我来说很简单:)
*:focus {
outline: 0 !important;
}
使用outline: none;你可以在铬中删除边界。
<style>
input[type=button] {
width: 120px;
height: 60px;
margin-left: 35px;
display: block;
background-color: gray;
color: white;
border: none;
outline: none;
}
</style>
正如许多人提到的,selector:focus {outline: none;}将删除该边框,但该边框是一个关键的可访问性特性,允许键盘用户找到按钮,不应该被删除。
由于您关心的似乎是一个美学问题,您应该知道您可以更改轮廓的颜色、样式和宽度,使其更适合您的网站样式。
selector:focus {
outline-width: 1px;
outline-style: dashed;
outline-color: red;
}
速记:
selector:focus {
outline: 1px dashed red;
}
删除大纲是可访问性的噩梦。使用键盘的人永远不知道他们在敲什么。
最好离开它,因为大多数点击按钮会把你带到某个地方,或者如果你必须删除轮廓,然后把它隔离为一个特定的类名。
.no-outline {
outline: none;
}
然后,您可以在需要时应用该类。