Cómo eliminar el borde resaltado en un elemento de texto de entrada

Cuando un elemento HTML está 'enfocado' (actualmente seleccionado / tabulado), muchos navegadores (al menos Safari y Chrome) colocarán un borde azul a su alrededor.

Para el diseño en el que estoy trabajando, esto distrae y no se ve bien.

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

Firefox no parece hacer esto, o al menos, me permitirá controlarlo con:

border: x;

Si alguien me puede decir cómo funciona IE, sería curioso.

Hacer que Safari elimine este pequeño destello sería bueno.

En su caso, intente:

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

O, en general, para afectar todos los elementos básicos de la forma:

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

En los comentarios, Noah Whitmore sugirió llevar esto aún más lejos para admitir elementos que tienen el contenteditableatributo establecido en true(convirtiéndolos efectivamente en un tipo de elemento de entrada). Los siguientes también deberían apuntar a aquellos (en navegadores compatibles con CSS3):

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

Aunque no lo recomendaría, por el bien de la integridad, siempre puede deshabilitar el esquema de enfoque en todo con esto:

*:focus {
    outline: none;
}

Tenga en cuenta que el esquema de enfoque es una característica de accesibilidad y usabilidad; da pistas al usuario sobre qué elemento está enfocado actualmente.

Para eliminarlo de todas las entradas

input {
 outline:none;
}

Este es un hilo antiguo, pero como referencia es importante tener en cuenta que no se recomienda deshabilitar el contorno de un elemento de entrada ya que dificulta la accesibilidad.

La propiedad de esquema está ahí por una razón: brinda a los usuarios una indicación clara del enfoque del teclado. Para más información y fuentes adicionales sobre este tema, visite http://outlinenone.com/

Esta es una preocupación común.

El esquema predeterminado que representan los navegadores es feo.

Vea esto por ejemplo:

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>

La "solución" más común que la mayoría recomienda es outline:none, que si se usa incorrectamente, es un desastre para la accesibilidad.

Entonces ... ¿de qué sirve el esquema de todos modos?

Hay una página web en seco corte muy encontré que explica todo muy bien.

Proporciona retroalimentación visual para enlaces que tienen "foco" cuando se navega por un documento web usando la tecla TAB (o equivalente). Esto es especialmente útil para las personas que no pueden usar un mouse o tienen una discapacidad visual. Si elimina el esquema, está haciendo que su sitio sea inaccesible para estas personas.

Ok, probemos el mismo ejemplo que el anterior, ahora use la TABtecla para 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>

¿Observa cómo puede saber dónde está el foco incluso sin hacer clic en la entrada?

Ahora, probemos outline:nonecon nuestro fiel<input>

Entonces, una vez más, use la TABtecla para navegar después de hacer clic en el texto y ver qué sucede.

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>

¿Ves cómo es más difícil descubrir dónde está el foco? El único signo revelador es el cursor parpadeando. Mi ejemplo anterior es demasiado simplista. En situaciones del mundo real, no tendría un solo elemento en la página. Algo más en la línea de esto.

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

Ahora compare eso con la misma plantilla si mantenemos el esquema:

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

Entonces hemos establecido lo siguiente

1. Los contornos son feos
2. Eliminarlos hace la vida más difícil.

Entonces, ¿cuál es la respuesta?

Elimine el contorno feo y agregue sus propias señales visuales para indicar el enfoque.

Aquí hay un ejemplo muy simple de lo que quiero decir.

Elimino el contorno y agrego un borde inferior en : foco y : activo . También elimino los bordes predeterminados en los lados superior, izquierdo y derecho configurándolos como transparentes en : foco y : activo (preferencia personal)

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>

Entonces, intentamos el enfoque anterior con nuestro ejemplo del "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>

Esto puede extenderse aún más mediante el uso de bibliotecas externas que se basan en la idea de modificar el "esquema" en lugar de eliminarlo por completo como Materialise

Puedes terminar con algo que no es feo y funciona con muy poco esfuerzo

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>

Esto me confundió por un tiempo hasta que descubrí que la línea no era un borde o un contorno, era una sombra. Entonces, para eliminarlo, tuve que usar esto:

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

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

¡Podrías usar CSS para deshabilitar eso! Este es el código que uso para deshabilitar el borde azul:

*:focus {
outline: none;
}

¡Esto eliminará el borde azul!

Este es un ejemplo de trabajo: JSfiddle.net

¡Espero eso ayude!

Eliminar todos los estilos de enfoque es malo para la accesibilidad y los usuarios de teclado en general. Pero los contornos son feos y proporcionar un estilo enfocado personalizado para cada elemento interactivo puede ser un verdadero dolor.

Entonces, el mejor compromiso que he encontrado es mostrar los estilos de contorno solo cuando detectamos que el usuario está usando el teclado para navegar. Básicamente, si el usuario presiona TAB, mostramos los contornos y si usa el mouse, los ocultamos.

No le impide escribir estilos de enfoque personalizados para algunos elementos, pero al menos proporciona un buen valor predeterminado.

Así es como lo hago:

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

Intenté todas las respuestas y aún no pude hacer que la mía funcionara en Mobile , hasta que lo encontré -webkit-tap-highlight-color.

Entonces, lo que funcionó para mí es ...

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

La única solución que funcionó conmigo

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

Usa este código:

input:focus {
    outline: 0;
}

Ninguna de las soluciones me funcionó en Firefox.

La siguiente solución cambia el estilo de borde en foco para Firefox y establece el contorno en ninguno para otros navegadores.

Efectivamente, hice que el borde de enfoque pasara de un brillo azul de 3 píxeles a un estilo de borde que coincida con el borde del área de texto. Aquí hay algunos estilos de borde:

Borde discontinuo (borde 2px rojo discontinuo):

¡Sin bordes! (borde 0px):

Borde de área de texto (borde 1px gris sólido):

Aquí está el 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>

Puedes probar esto también

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

o

.classname input{
outline-style: none;
}

Puede eliminar el borde naranja o azul (contorno) alrededor de los cuadros de texto / entrada usando: esquema: ninguno

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

Elimine el contorno cuando el foco esté en el elemento, utilizando la propiedad CSS a continuación:

input:focus {
    outline: 0;
}

Esta propiedad CSS elimina el contorno de todos los campos de entrada en foco o usa una pseudo clase para eliminar el contorno del elemento usando la propiedad CSS a continuación.

.className input:focus {
    outline: 0;
} 

Esta propiedad elimina el contorno del elemento seleccionado.

Prueba esto

*:focus {
    outline: none;
}

Esto afectaría a todas sus páginas