Como remover o destaque fronteira em um elemento de entrada de texto

Question

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

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

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

O Firefox não parece fazer isso, ou pelo menos, me deixa controlá-lo com:

border: x;

Se alguém pode me dizer como executa IE, eu seria curioso.

Obter Safari para remover este pouco de alargamento seria bom.

Answer 1

No seu caso, tente:

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

Ou, em geral, para afetar todos os elementos de formulário básico:

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

---

Nos comentários, Noah Whitmore sugeriu tomar este ainda mais para elementos de suporte que têm o conjunto de atributos contenteditable para true (efetivamente fazendo -lhes um tipo de elemento de entrada). O seguinte deve direcionar as também (em CSS3 navegadores capazes):

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

Embora eu não recomendo, Para ser completo, você pode sempre desactivar o contorno foco em tudo com o seguinte:

*:focus {
    outline: none;
}

Tenha em mente que o esboço foco é um recurso de acessibilidade e usabilidade; -lo pistas o usuário em qual elemento está atualmente focado.

Answer 2

Para removê-lo de todas as entradas

input {
 outline:none;
}

Answer 3

Esta é uma discussão antiga, mas para referência é importante notar que a desativação contorno de um elemento de entrada não é recomendada, pois dificulta a acessibilidade.

A propriedade esboço está lá por uma razão - proporcionando aos usuários uma indicação clara do foco do teclado. Para ler mais e adicionais fontes sobre este assunto consulte http://outlinenone.com/

Answer 4

Esta é uma preocupação comum.

O padrão que os navegadores renderizar é feio.

Veja este por exemplo:

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>

---

O comum "correção" mais que a maioria recomendo é outline:none - que se usado incorretamente - é um desastre para a acessibilidade.

---

Então ... para que serve o contorno de qualquer maneira?

Há um website de corte seco muito eu achei que explica tudo muito bem.

Ele fornece feedback visual para links que têm "foco" quando navegar em um documento da Web usando a tecla TAB (ou equivalente). Isto é especialmente útil para pessoas que não podem usar um mouse ou têm um visual imparidade. Se você remover o contorno que você está fazendo seu site inacessível para estas pessoas.

OK, vamos testá-lo mesmo exemplo acima, agora usar a chave TAB de navegar.

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>

Observe como você pode dizer onde o foco é mesmo sem clicar na entrada?

Agora, vamos tentar outline:none em nosso fiel <input>

Assim, mais uma vez, use a tecla TAB de navegar depois de clicar no texto e ver o que acontece.

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>

Veja como é mais difícil descobrir onde o foco é? O único sinal dizendo é o cursor a piscar. Meu exemplo acima é demasiado simplista. Em situações do mundo real, você não teria apenas um elemento na página. Algo mais ao longo das linhas deste.

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

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

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

Então, nós estabelecemos o seguinte

1. Os esboços são feios
2. A remoção deles torna a vida mais difícil.

---

Então, qual é a resposta?

Remover o contorno feio e adicionar suas próprias pistas visuais para indicar foco.

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

Eu remover o contorno e adicionar uma beira inferior no : Foco : ativo. Eu também remover as bordas padrão no topo, esquerda e direita lados, definindo-as para transparente em : foco e : ativa (preferência pessoal )

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>

Então, nós tentamos a abordagem acima com o nosso exemplo do "mundo real" de antes:

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

Isso pode ser estendido ainda mais usando bibliotecas externas que construir sobre a idéia de modificar o "esboço" em oposição a removê-lo totalmente como materializar

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

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>

Answer 5

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

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Answer 6

Você pode usar CSS para desabilitar essa! Este é o código que eu uso para a desativação da fronteira azul:

*:focus {
outline: none;
}

Isto irá remover a borda azul!

Este é um exemplo de trabalho: JSfiddle.net

Espero que ajude!

Answer 7

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

Então, o melhor compromisso que eu encontrei é para mostrar os estilos de contorno somente quando detectar que o usuário está usando o teclado para navegar. Basicamente, se o usuário pressiona TAB, vamos mostrar os contornos e se ele usa o mouse, que ocultá-los.

Não impedi-lo de estilos de escrita foco personalizado para alguns elementos, mas pelo menos ele fornece um bom padrão.

Isto é como eu fazê-lo:

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

Answer 8

Use este código:

input:focus {
    outline: 0;
}

Answer 9

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

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

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

Answer 10

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

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

Eu efetivamente fez o movimento fronteira foco de um brilho azul 3px para um estilo de borda que corresponde a borda da área de texto. Eis alguns estilos de borda:

fronteira tracejado (2px borda tracejada vermelho):

Sem fronteira! (0px fronteira):

fronteira Textarea (fronteira 1px cinza sólida):

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>

Answer 11

Você pode tentar isso também

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

ou

.classname input{
outline-style: none;
}

Answer 12

Remova o contorno quando o foco está no elemento, usando abaixo propriedade CSS:

input:focus {
    outline: 0;
}

Esta propriedade CSS remove o esboço para todos os campos de entrada na focagem ou o uso de classe pseudo delinear remoção de elemento usando abaixo propriedade CSS.

.className input:focus {
    outline: 0;
} 

Esta propriedade remove o contorno para o elemento selecionado.

Answer 13

Tente este 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;

}

Answer 14

Você pode remover o laranja ou borda azul (esboço) em torno das caixas de texto / entrada usando: outline: none

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