当我点击其他地方的边界消失,我试图使用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" >
当前回答
这个方法对我很管用
button:focus {
border: none;
outline: none;
}
其他回答
使用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>
移除nessorry accessible事件在标准的web开发中不是一个好主意。 无论哪种方法,如果你在寻找解决方案,仅仅去掉轮廓并不能解决问题。您还必须删除蓝色阴影。对于特定的场景,请使用单独的类名将此特殊样式与按钮隔离。
.btn.focus, .btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
最好这样做
.remove-border.focus, .remove-border:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
将按钮的轮廓和框影属性都设置为none,并使它们重要。
input[type=button] {
outline: none !important;
box-shadow: none !important;
}
outline属性就是您所需要的。它是在单个声明中设置以下每个属性的简写:
outline-style outline-width 边框色
你可以使用outline: none;,这是公认答案中的建议。如果你想,你也可以说得更具体:
button {
outline-style: none;
}
给定下面的html:
<button class="btn-without-border"> Submit </button>
在css样式中执行以下操作:
.btn-without-border:focus {
border: none;
outline: none;
}
此代码将删除按钮边框,并在单击按钮时禁用按钮边框焦点。