Como remover o destaque da borda em um elemento de texto de input

Quando um elemento html é ‘focalizado’ (atualmente selecionado / tabulado para), muitos navegadores (pelo menos Safari e Chrome) colocarão uma borda azul em torno dele.

Para o layout em que estou trabalhando, isso é uma distração e não parece certo.

 

FireFox não parece fazer isso, ou pelo menos, vai me deixar controlá-lo com

 border: x; 

Se alguém puder me dizer como o IE funciona, eu ficaria curioso.

Mas fazer com que o Safari remova esse pouco de brilho seria bom.

No seu caso, tente:

 input.middle:focus { outline-width: 0; } 

Ou, em geral, para afetar todos os elementos básicos do formulário:

 input:focus, select:focus, textarea:focus, button:focus { outline: none; } 

Nos comentários, Noah Whitmore sugeriu levar isso ainda mais longe para suportar elementos que têm o atributo contenteditable definido como true (efetivamente tornando-os um tipo de elemento input). O seguinte deve ser direcionado a esses também (em navegadores compatíveis com CSS3):

 [contenteditable="true"]:focus { outline: none; } 

Embora eu não recomende isso, por uma questão de integridade, você pode sempre desabilitar o foco em tudo com isso:

 *:focus { outline: none; } 

Tenha em mente que o esquema de foco é um recurso de acessibilidade e usabilidade; Ele indica ao usuário em qual elemento está atualmente focado.

Para removê-lo de todas as inputs

 input { outline:none; } 

Este é um thread antigo, mas para referência é importante notar que desabilitar o contorno de um elemento de input não é recomendado, pois dificulta a acessibilidade.

A propriedade de contorno existe por um motivo – fornecendo aos usuários uma indicação clara do foco do teclado. Para ler mais e fonts adicionais sobre este assunto, consulte http://outlinenone.com/

Use este código:

 input:focus { outline: 0; } 

Você poderia usar CSS para desabilitar isso! Este é o código que eu uso para desativar a borda azul:

 *:focus { outline: none; } 

Isso removerá a borda azul!

Este é um exemplo prático : JSfiddle.net

Espero que ajude!

Esta é uma preocupação comum.

O esquema padrão que os navegadores processam é feio.

Veja isto por exemplo:

 form, label { margin: 1em auto; } label { display: block; } 
 

Você pode tentar isso também

 input[type="text"] { outline-style: none; } 

ou

 .classname input{ outline-style: none; } 

Remova o contorno quando o foco estiver no elemento, usando abaixo da propriedade CSS:

 input:focus { outline: 0; } 

Esta propriedade CSS remove o esquema de todos os campos de input em foco ou usa a pseudoclass para remover o contorno do elemento usando a propriedade CSS abaixo.

 .className input:focus { outline: 0; } 

Esta propriedade remove o contorno do elemento selecionado.

Remover todos os estilos de foco é ruim para acessibilidade e usuários de teclado em geral. Mas os esboços são feios e fornecer um estilo personalizado para cada elemento interativo pode ser uma dor real.

Então, o melhor compromisso que encontrei é mostrar os estilos de contorno apenas quando detectamos que o usuário está usando o teclado para navegar. Basicamente, se o usuário pressionar TAB, mostramos os contornos e, se ele usar o mouse, os ocultamos.

Isso não impede que você escreva estilos de foco personalizados para alguns elementos, mas pelo menos fornece um bom padrão.

É assim que eu faço:

 // detect keyboard users const keyboardUserCssClass = "keyboardUser"; function setIsKeyboardUser(isKeyboard) { const { body } = document; if (isKeyboard) { body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass); } else { body.classList.remove(keyboardUserCssClass); } } // This is a quick hack to activate focus styles only when the user is // navigating with TAB key. This is the best compromise we've found to // keep nice design without sacrifying accessibility. document.addEventListener("keydown", e => { if (e.key === "Tab") { setIsKeyboardUser(true); } }); document.addEventListener("click", e => { // Pressing ENTER on buttons triggers a click event with coordinates to 0 setIsKeyboardUser(!e.screenX && !e.screenY); }); document.addEventListener("mousedown", e => { setIsKeyboardUser(false); }); 
 body:not(.keyboardUser) *:focus { outline: none; } 
 

By default, you'll see no outline. But press TAB key and you'll see focussed element

This is anchor link

Eu tentei todas as respostas e ainda não consegui o meu para trabalhar no Mobile , até que encontrei -webkit-tap-highlight-color .

Então, o que funcionou para mim é …

 * { -webkit-tap-highlight-color: transparent; } 

Isso foi me confundindo por algum tempo até que descobri que a linha não era nem uma borda ou um contorno, era uma sombra. Então, para removê-lo eu tive que usar isso:

 input:focus, input.form-control:focus { outline:none !important; outline-width: 0 !important; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } 

Tente isso também

 .form-group input { display: block; background: none; padding: 0.175rem 0.175rem 0.0875rem; font-size: 1.4rem; border-width: 0; border-color: transparent; line-height: 1.9; width: 100%; color: #ccc; transition: all 0.28s ease; box-shadow: none; } 

Nenhuma das soluções funcionou para mim no Firefox.

A solução a seguir altera o estilo de borda em foco para o Firefox e define o contorno como none para outros navegadores.

Eu efetivamente fiz a borda do foco ir de um brilho azul de 3 pixels para um estilo de borda que corresponde à borda da área de texto. Aqui estão alguns estilos de borda:

Fronteira tracejada (borda 2px tracejada vermelho): Fronteira tracejada. fronteira 2px tracejada vermelho

Sem borda! (fronteira 0px):
Sem borda. fronteira: 0px

Textarea border (border 1px solid grey): Textarea border. borda 1px cinza sólido

Aqui está o código:

 input:focus, textarea:focus { outline: none; /** For Safari, etc **/ border:1px solid gray; /** For Firefox **/ } #textarea { position:absolute; top:10px; left:10px; right:10px; width:calc(100% - 20px); height:160px; display:inline-block; margin-top:-0.2em; } 
  

Você pode remover a borda laranja ou azul (contorno) ao redor das checkboxs de texto / input usando: estrutura de tópicos: nenhum

 input { background-color: transparent; border: 0px solid; height: 20px; width: 160px; color: #CCC; outline:none !important; } 
    Intereting Posts