Como remover o realce da borda em um elemento de texto de entrada

610

Quando um elemento HTML é 'focado' (atualmente selecionado / tabulado), muitos navegadores (pelo menos Safari e Chrome) colocam uma borda azul em torno dele.

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

<input type="text" name="user" class="middle" id="user" tabindex="1" />

O Firefox parece não fazer isso, ou pelo menos, permitirá que eu o controle com:

border: x;

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

Conseguir que o Safari remova esse pouco de flare seria bom.

— user170579
fonte

1100

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 apoiar elementos com o contenteditableatributo definido true(tornando-os efetivamente um tipo de elemento de entrada). O seguinte deve ser direcionado também (em navegadores compatíveis com CSS3):

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

Embora eu não recomende, por uma questão de integridade, você sempre pode desativar o esboço do foco em tudo isso:

*:focus {
    outline: none;
}

Lembre-se de que o esboço do foco é um recurso de acessibilidade e usabilidade; indica ao usuário qual elemento está atualmente focado.

— Cᴏʀʏ
fonte

10

Obrigado Cory, ótima dica. Você também precisa atribuir o CSS à área de texto para cobrir todos os campos de entrada. input:focus, textarea:focus {outline: none;}

— BaronGrivet 17/10/11

7

não se esqueça de selecionar tambémselect:focus {outline:none;}

— Geek Num 88

2

Há também a <button>tag, que é usada pela jQuery UI e Twitter Bootstrap, entre outras coisas, então eu adicionaria button: focusà lista a integridade.

— Chris Parton

1

Na minha experiência, isso pode acontecer sem foco, caso em que eu tinha que aplicá-lo abutton, button:focus { outline:none; }

— Mike Lyons

1

@ Cᴏʀʏ você se importaria de mudar a nota sobre a11y e usabilidade para o topo da sua pergunta? OMI melhoraria bastante sua resposta, pois remover os recursos do a11y é uma prática ruim.

— Josef Engelfrost 8/08

64

Para removê-lo de todas as entradas

input {
 outline:none;
}

— marcjae
fonte

31

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

A propriedade estrutura de tópicos existe por um motivo - fornecendo aos usuários uma indicação clara do foco do teclado. Para leituras adicionais e fontes adicionais sobre esse assunto, consulte http://outlinenone.com/

— Boaz - Restabelecer Monica
fonte

1

Boaz, FYI input.middle {outline: none} ainda permitirá que você percorra os elementos (incluindo input.middle). Pressionar a tecla Tab também focará na etiqueta de entrada. A única coisa é que você não será capaz de ver o foco (foco do esboço) nele. Portanto, não é tão prejudicial para usá-lo ..:)

— Anish Nair

11

@ AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- e esse é exatamente o meu ponto. A remoção do contorno desativa a indicação visual do evento de foco, não o evento real. Remover a indicação visual significa que você está dificultando as pessoas com deficiência que dependem dessa indicação.

— Boaz - Restabelece Monica

2

Às vezes precisamos de compromisso, a fim de alcançar algo:)

— Anish Nair

6

@AnishNair True. Porém, mais frequentemente, as pessoas que lêem este tópico preferem a saída mais fácil (ie outline:none;) sem considerar as implicações. Só porque algo é fácil e economiza tempo, não significa que é melhor prática :)

— Boaz - Reintegrar Monica

5

Estou atrasado para a discussão, mas você ainda pode estilizar o estado de foco das entradas (como alterar a cor ou a largura da borda). Desde que você mantenha a acessibilidade em mente ao fazer isso (bom contraste, etc.), é tão acessível quanto os contornos padrão.

— Meg

18

Essa é uma preocupação comum.

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

Veja isto por exemplo:

Mostrar snippet de código

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Expandir snippet

A "correção" mais comum recomendada é a outline:noneque, se usada incorretamente, é um desastre para a acessibilidade.

Então ... de que uso é o esboço afinal?

Há um site muito seca-cut eu achei que explica tudo muito bem.

Ele fornece feedback visual para links com "foco" ao navegar em um documento da Web usando a tecla TAB (ou equivalente). Isso é especialmente útil para pessoas que não podem usar o mouse ou têm deficiência visual. Se você remover o esquema, estará tornando o site inacessível para essas pessoas.

Ok, vamos tentar o mesmo exemplo acima, agora use a TABtecla para navegar.

Mostrar snippet de código

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Expandir snippet

Observe como você pode saber onde está o foco mesmo sem clicar na entrada?

Agora, vamos experimentar o outline:nonenosso fiel<input>

Então, mais uma vez, use a TABtecla para navegar depois de clicar no texto e ver o que acontece.

Mostrar snippet de código

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Expandir snippet

Veja como é mais difícil descobrir onde está o foco? O único sinal indicativo é o cursor piscando. Meu exemplo acima é excessivamente simplista. Em situações do mundo real, você não teria apenas um elemento na página. Algo mais parecido com isso.

Mostrar snippet de código

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Expandir snippet

Agora compare isso com o mesmo modelo se mantivermos o esboço:

Mostrar snippet de código

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Expandir snippet

Então, estabelecemos o seguinte

Os contornos são feios
Removê-los torna a vida mais difícil.

Então qual é a resposta?

Remova o contorno feio e adicione suas próprias dicas visuais para indicar o foco.

Aqui está um exemplo muito simples do que quero dizer.

Eu removo o contorno e adiciono uma borda inferior em : focus e : active . Também removo as bordas padrão nos lados superior, esquerdo e direito, definindo-as como transparentes em : focus e : active (preferência pessoal)

Mostrar snippet de código

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Expandir snippet

Portanto, tentamos a abordagem acima com o nosso exemplo do mundo real anterior:

Mostrar snippet de código

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Expandir snippet

Isso pode ser estendido ainda mais usando bibliotecas externas que se baseiam na idéia de modificar o "esboço" em vez de removê-lo inteiramente como Materialize

Você pode acabar com algo que não é feio e funciona com muito pouco esforço

Mostrar snippet de código

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

Expandir snippet

— Eu haz kode
fonte

18

Isso me confundiu por algum tempo, até que descobri que a linha não era nem uma borda nem um contorno, era uma sombra. Então, para removê-lo, 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;
}

— Rikard Askelöf
fonte

6

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

*:focus {
outline: none;
}

Isso removerá a borda azul!

Este é um exemplo de trabalho: JSfiddle.net

Espero que ajude!

— 1010
fonte

4

A remoção de todos os estilos de foco é ruim para acessibilidade e usuários de teclado em geral. Mas os contornos são feios e fornecer um estilo focado personalizado para cada elemento interativo pode ser uma verdadeira dor de cabeça.

Portanto, o melhor compromisso que encontrei é mostrar os estilos de estrutura de tópicos somente 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.

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

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>

Expandir snippet

— Tom Esterez
fonte

Esta é uma abordagem completa. O clickouvinte é um toque agradável.

— Keith DC

4

Eu tentei todas as respostas e ainda não consegui que as minhas funcionassem no Mobile , até encontrar-webkit-tap-highlight-color .

Então, o que funcionou para mim é ...

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

— Oneezy
fonte

1

Essa é a solução que eu estava procurando. Isto é particularmente útil quando você está touchscreen experiências com elementos como li

— Anand G

4

A única solução que funcionou comigo

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

— Ali Al Amine
fonte

3

Use este código:

input:focus {
    outline: 0;
}

— Touhid Rahman
fonte

2

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

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

Efetivamente, fiz a borda do foco passar de um brilho azul de 3px para um estilo de borda que corresponde à borda da área de texto. Aqui estão alguns estilos de borda:

Borda tracejada (borda 2px tracejada em vermelho):

Sem fronteira! (limite 0 px):

Borda da área de texto (borda 1px em 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;
}

<textarea id="textarea">yo</textarea>

Expandir snippet

— 1,21 gigawatts
fonte

1

Você pode tentar isso também

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

ou

.classname input{
outline-style: none;
}

— Santosh Khalse
fonte

1

Você pode remover a borda laranja ou azul (estrutura de tópicos) em torno das caixas de texto / entrada usando: estrutura de tópicos: nenhuma

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

— Rizo
fonte

0

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

input:focus {
    outline: 0;
}

Essa propriedade CSS remove o contorno de todos os campos de entrada em foco ou usa a pseudo classe para remover o contorno do elemento usando a propriedade CSS abaixo.

.className input:focus {
    outline: 0;
}

Esta propriedade remove o contorno do elemento selecionado.

— Shailesh
fonte

0

Tente isto

*:focus {
    outline: none;
}

Isso afetaria suas páginas

— subindas pm
fonte