Cómo quitar el resaltado frontera en un elemento de entrada de texto

https://stackoverflow.com/questions/1457849

12-09-2019
|

Pregunta

Cuando un elemento HTML está 'centrado' (seleccionado / pestañas en), muchos navegadores (por lo menos de Safari y Chrome) se puso un borde azul alrededor de él.

Para ver la disposición que estoy trabajando, esto es una distracción 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 deja controlarlo con:

border: x;

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

Cómo Safari para eliminar este pequeño pedazo de la llamarada estaría bien.

Solución

En su caso, trate de:

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

O, en general, afectando a todos los elementos básicos de formulario:

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

En los comentarios, Noah Whitmore sugirió tomar este aún más para apoyar a elementos que tienen el atributo contenteditable establecido en true (haciendo efectivamente ellos un tipo de elemento de entrada). Lo siguiente debe apuntar a los también (en los navegadores capaces CSS3):

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

A pesar de que no lo recomendaría, por el amor integridad, siempre se puede desactivar el contorno enfoque en todo con esto:

*:focus {
    outline: none;
}

Tenga en cuenta que el esquema de enfoque es una función de accesibilidad y facilidad de uso; TI pistas al usuario en qué elemento se centra actualmente.

Otros consejos

Para eliminarlo de todas las entradas

input {
 outline:none;
}

Este es un hilo viejo, pero para 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 contorno está ahí por una razón - proporcionando a los usuarios una indicación clara del foco del teclado. Para la lectura adicional y fuentes adicionales sobre este tema, véase http://outlinenone.com/

Esta es una preocupación común.

El delinear que los navegadores hacen que sea 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 - lo que si se usa incorrectamente - es un desastre para la accesibilidad.

Entonces ... ¿para qué sirve el contorno de todos modos?

Hay una sitio web muy corta en seco encontré que explica todo muy bien.

Se proporciona retroalimentación visual para los enlaces que están "foco" cuando navegar por un documento web utilizando la tecla TAB (o equivalente). Esto es especialmente útil para las personas que no pueden usar un ratón o tienen una representación visual discapacidad. Si se quita el esquema que está haciendo su sitio inaccesibles para estas personas.

Ok, vamos a probarlo mismo ejemplo anterior, ahora utilizar la tecla 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 cómo se puede saber donde está el foco, incluso sin hacer clic en la entrada?

Ahora, vamos a probar en nuestro outline:none <input> de confianza

Así que, una vez más, utilice la tecla TAB para navegar tras pulsar el texto y ver qué pasa.

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>

Vea cómo es más difícil de averiguar donde está el foco? El único signo revelador es el cursor parpadeante. Mi ejemplo anterior es demasiado simplista. En situaciones del mundo real, que no tendría sólo un elemento en la página. Algo más en la línea de este.

.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 compara eso con la misma plantilla si seguimos 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>

Así que hemos establecido la siguiente

Los contornos son feos
Extracción les hace la vida más difícil.

¿Cuál es la respuesta?

Eliminar el contorno feo y añadir sus propias señales visuales para indicar el enfoque.

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

Me quito el contorno y añadir un borde inferior de href="https://developer.mozilla.org/en/docs/Web/CSS/:focus": centrarse y : activo. También se eliminan los bordes predeterminados en la parte superior, lados izquierdo y derecho estableciendo su valor a transparente en la : centrarse y : activa (preferencias personales )

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>

Por lo tanto, tratamos el enfoque anterior con nuestro "mundo real" ejemplo 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 se puede ampliar aún más mediante el uso de bibliotecas externas que se basan en la idea de modificar el "contorno", en oposición a la eliminación por completo como materializarse

Puede terminar con algo que no es fea y trabaja 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 fue confundirme por algún tiempo hasta que descubrí la línea no era ni una frontera o un esquema, que era una sombra. Así que 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;
}

Se puede usar CSS para desactivar eso! Este es el código que utilizo para deshabilitar el borde azul:

*:focus {
outline: none;
}

Esto eliminará la frontera azul!

Este es un ejemplo de trabajo: JSfiddle.net

Espero que ayude!

La eliminación de todos los estilos de enfoque es malo para los usuarios de accesibilidad y del teclado en general. Pero contornos son feos y proporcionando un estilo enfocado a medida para cada elemento interactivo sola puede ser un dolor real.

Así que el mejor compromiso que he encontrado es para mostrar los estilos de esquema sólo cuando se detecta que el usuario está utilizando el teclado para navegar. Básicamente, si el usuario presiona TAB, se muestran los contornos y si utiliza el ratón, les escondemos.

No se detiene de estilos de escritura de enfoque personalizado para algunos elementos, pero al menos ofrece un buen valor por defecto.

Esto es cómo 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/>

Utilice este código:

input:focus {
    outline: 0;
}

He intentado todas las respuestas y que todavía no podía conseguir la mina para trabajar en Mobile , hasta que encontré -webkit-tap-highlight-color.

Por lo tanto, lo que funcionó para mí es ...

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

Ninguna de las soluciones trabajado para mí en Firefox.

La siguiente solución cambia el estilo de borde en el enfoque para Firefox y establece el esquema para ninguno de los otros navegadores.

He hecho efectivamente la frontera enfoque pasar de un brillo azul 3px a un estilo de borde que coincide con el borde del área de texto. He aquí algunos estilos de borde:

(2px borde punteado rojo) La frontera:

Sin borde! (0px frontera):

frontera Área de texto (borde de 1 píxel de color gris sólido):

Este es 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>

Puede probar esto también

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

.classname input{
outline-style: none;
}

Eliminar el contorno cuando el foco está en el elemento, mediante el siguiente propiedad CSS:

input:focus {
    outline: 0;
}

Esta propiedad CSS elimina el contorno de todos los campos de entrada de enfoque o utilizar pseudo clase para eliminar contorno del elemento mediante el siguiente propiedad CSS.

.className input:focus {
    outline: 0;
}

Esta propiedad elimina el esquema para el elemento seleccionado.

Trate esto también

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

}

Se puede quitar el naranja o azul frontera (contorno) alrededor de las cajas de texto / entrada mediante el uso de: contornos: ninguno

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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow