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

137

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

Cindy Turlington
fonte
parece bem no meu navegador mozilla
Drixson Oseña
1
O retângulo de foco deve ajudar o usuário a observar que o clique foi eficaz e, assim, impedi-lo de clicar acidentalmente duas vezes. Então, você tem certeza de que está resolvendo um problema e não criando um?
Jukka K. Korpela #
2
Uma boa leitura a11yproject.com/posts/never-remove-css-outlines
Taimur Khan

Respostas:

192

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>
Ankit Agrawal
fonte
19
No Chrome, eu tive que adicionar outline: none;regra ao input[type="button"]:focusinvés de input[type="button"].
Sung Cho
@SungCho: Obrigado. Seu método me ajudou.
priyamtheone 6/07
75

Destaque os contornos no Chrome e no FF

insira a descrição da imagem aqui insira a descrição da imagem aqui

removido:

insira a descrição da imagem aqui

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 */
}
Roko C. Buljan
fonte
54

Funciona para mim simplesmente :)

*:focus {
    outline: 0 !important;
}
X-Coder
fonte
1
Esta é a única resposta que funcionou para mim, mas como você faria isso sem! Importante? Ouvi de várias fontes que você só deve usá-lo se for absolutamente necessário.
Jay
Eu fiz esse estilo de botão para toda a aplicação em css externo. Se você quiser ignorá-lo, você pode fazê-lo com #id em css usando isso em cada botão: # button-tyle {outline: 0; } ou use o mesmo estilo para todos os botões sem #id em cada botão, aqui está um link de demonstração : input [type = "button"] {width: 70px; altura: 30px; margem esquerda: 72px; margem superior: 15 px; display: bloco; cor de fundo: cinza; cor branca; borda: nenhuma; esboço: 0; }
X-Coder 07/07
19

Este funcionou para mim

button:focus {
    border: none;
    outline: none;
}
mnis.p
fonte
14

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;
}
Henry Wright
fonte
9
button:focus{outline:none !important;}

adicione !importantse for usado no Bootstrap

user11173874
fonte
1
Acho que o autor já tentou isso, afinal, diz a pergunta tried onfocus none, but didn't help.
JJ for Transparency e Monica
4

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);
}

A.Peralta
fonte
3

É 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.

Gourav
fonte
3

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);
 }
asith
fonte
3

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.

Eyoab
fonte
2

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.

martinedwards
fonte
2

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.

Mwiza
fonte
2

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;
}
Dave
fonte