如何从输入按钮中删除轮廓边框

Question

当点击其他地方时,边框消失,尝试onfocus none,但没有帮助,如何点击丑陋的按钮边框消失？

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

Answer 1

使用outline:none; 我们可以删除chrome中的边框

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Answer 2

重点关注Chrome和FF

删除:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

演示

PS:

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Answer 3

它对我有用:)

*:focus {
    outline: 0 !important;
}

Answer 4

将按钮的outline和box-shadow属性设置为none并使它们重要。

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

将这些值设置为important的原因是，如果您使用其他 CSS 库或框架（如 Bootstrap），它可能会被覆盖。

Answer 5

这个对我有用

button:focus {
    border: none;
    outline: none;
}

Answer 6

该outline物业是您所需要的.它是在单个声明中设置以下每个属性的简写:

• outline-style
• outline-width
• outline-color

你可以使用outline: none;,这是在接受的答案中建议的.如果你想要你也可以更具体:

button {
    outline-style: none;
}

Answer 7

button:focus{outline:none !important;}

!important如果在Bootstrap中使用它，则添加

Answer 8

为了避免更改焦点上的轮廓属性时引起的问题，需要在用户按 Tab 键或单击输入按钮时提供视觉效果。

在本例中是提交类型，但您也可以应用于 type="button"。

input[type=submit]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}