Como remover a borda do contorno do botão de entrada

quando clicar em outro lugar, a borda desaparecerá, tentei não focar nenhuma, mas não ajudou, como fazer com que a borda do botão feio desapareça ao clicar?

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">

usando esboço: nenhum; podemos remover essa borda no chrome

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

Destaque os contornos no Chrome e no FF

removido:

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

Demo

Acessibilidade (A11Y)

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

Funciona para mim simplesmente :)

*:focus {
    outline: 0 !important;
}

Este funcionou para mim

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

A outlinepropriedade é o que você precisa. É uma abreviação para definir cada uma das seguintes propriedades em uma única declaração:

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

Você pode usar outline: none;, o que é sugerido na resposta aceita. Você também pode ser mais específico se desejar:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

adicione !importantse for usado no Bootstrap

Para evitar o problema causado quando você altera a propriedade do contorno em um foco, é possível fornecer um efeito visual quando a guia do usuário no botão de entrada ou clicar nele.

Nesse caso, é um tipo de envio, mas você também pode aplicar a um type = "button".

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

É muito simples do que você pensa. Quando o botão estiver focado, aplique a outlinepropriedade da seguinte maneira:

button:focus {
    outline: 0 !important;
}

Mas quando uso nonevalor, isso não funciona para mim.

Remover um evento acessível desnecessário não é uma boa ideia nos desenvolvimentos da Web padrão. de qualquer maneira, se você procura uma solução removendo apenas o contorno, não resolve o problema. você também precisa remover a sombra da cor azul. para cenários específicos, use um nome de classe separado para isolar esse estilo especial no seu botão.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Melhor fazer isso

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Defina outlineas box-shadowpropriedades e do botão nonee torne-as importantes .

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

O motivo para definir os valores como importantes é que, se você estiver usando outras bibliotecas ou estruturas CSS como o Bootstrap, ele poderá ser substituído.

Remover o contorno é um pesadelo de acessibilidade. As pessoas que usam guias do teclado nunca saberão em que item estão.

É melhor deixá-lo, pois a maioria dos botões clicados o levará a algum lugar, ou se você tiver que remover o contorno, isole-o de um nome de classe específico.

.no-outline {
  outline: none;
}

Em seguida, você pode aplicar essa classe sempre que precisar.

Dado o html abaixo:

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

No estilo css, faça o seguinte:

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

Este código removerá a borda do botão e desativará o foco da borda do botão quando o botão for clicado.

Como muitos outros mencionaram, selector:focus {outline: none;}a borda será removida, mas essa borda é um recurso essencial de acessibilidade que permite aos usuários do teclado encontrar o botão e não deve ser removido.

Como sua preocupação parece estética, você deve saber que pode alterar a cor, o estilo e a largura do contorno, ajustando-o melhor ao estilo do site.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Forma abreviada:

selector:focus {
  outline: 1px dashed red;
}