当我点击其他地方的边界消失,我试图使用onfocus: none,但这没有帮助。如何使这个丑陋的按钮边界消失时,我点击它?

输入(type =按钮){ 宽度:120 px; 高度:60 px; margin-left: 35 px; 显示:块; 背景颜色:灰色; 颜色:白色; 边界:没有; } <input type="button" value="Example button" >


当前回答

这对我来说很简单:)

*:focus {
    outline: 0 !important;
}

其他回答

将按钮的轮廓和框影属性都设置为none,并使它们重要。

input[type=button] {
    outline: none !important;
    box-shadow: none !important;
} 

The reason for setting the values to **important** is that, if you are using other CSS libraries or frameworks like Bootstrap, it might get overridden.

给定下面的html:

<button class="btn-without-border"> Submit </button>

在css样式中执行以下操作:

.btn-without-border:focus {
    border: none;
    outline: none;
}

此代码将删除按钮边框,并在单击按钮时禁用按钮边框焦点。

这对我来说很简单:)

*: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>

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 */
}