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

611

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.

css input safari webkit border usuario170579
fuente

1101

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.

Cᴏʀʏ
fuente

10

Gracias Cory, buen consejo. También debe asignar el CSS al área de texto para cubrir todos los campos de entrada. input:focus, textarea:focus {outline: none;}

BaronGrivet

77

no olvides seleccionar tambiénselect:focus {outline:none;}

Geek Num 88

2

También está la <button>etiqueta, que es utilizada por jQuery UI y Twitter Bootstrap, entre otras cosas, por lo que agregaría button: focusa la lista para completar.

Chris Parton

1

En mi experiencia, esto puede suceder sin foco, en cuyo caso tenía que aplicarlo abutton, button:focus { outline:none; }

Mike Lyons

1

@ Cᴏʀʏ, ¿le importaría mover la nota sobre a11y y usabilidad a la parte superior de su pregunta? En mi opinión, mejoraría enormemente su respuesta, ya que eliminar todas las funciones es una mala práctica.

Josef Engelfrost

64

Para eliminarlo de todas las entradas

input {
 outline:none;
}

marcjae
fuente

31

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/

Boaz - Restablece a Monica
fuente

1

Boaz, FYI input.middle {outline: none} todavía le permitirá atravesar los elementos (incluido input.middle). Al presionar la tecla tab se enfocará también en la etiqueta de entrada. Lo único es que no podrá ver el foco (foco del esquema) en él. Así que no es tan dañino usarlo ...

:)

11

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it, y ese es exactamente mi punto. La eliminación del contorno deshabilita la indicación visual del evento de enfoque, no el evento real. Eliminar la indicación visual significa que está haciendo que sea más difícil para las personas con discapacidad que confían en esa indicación.

Boaz - Restablece a Mónica el

2

A veces tenemos que comprometernos para lograr algo

:)

66

@AnishNair True. Pero más que a menudo las personas que leen este hilo preferirían la salida fácil (es decir outline:none;) sin considerar las implicaciones. El hecho de que algo sea fácil y ahorre tiempo no significa que sea la mejor práctica :)

Boaz - Reinstale a Mónica el

55

Llegué tarde a la discusión, pero aún puede diseñar el estado enfocado de las entradas (como cambiar el color o el ancho del borde). Siempre que tenga en cuenta la accesibilidad al hacer eso (buen contraste, etc.), es tan accesible como los contornos predeterminados.

Meg

18

Esta es una preocupación común.

El esquema predeterminado que representan los navegadores es feo.

Vea esto por ejemplo:

Mostrar fragmento 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 fragmento

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.

Mostrar fragmento 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 fragmento

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

Mostrar fragmento 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 fragmento

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

Mostrar fragmento 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 fragmento

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

Mostrar fragmento 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 fragmento

Entonces hemos establecido lo siguiente

Los contornos son feos
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)

Mostrar fragmento 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 fragmento

Entonces, intentamos el enfoque anterior con nuestro ejemplo del "mundo real" de antes:

Mostrar fragmento 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 fragmento

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

Mostrar fragmento 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 fragmento

I haz kode
fuente

18

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

Rikard Askelöf
fuente

6

¡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!

1010
fuente

4

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

Expandir fragmento

Tom Esterez
fuente

Este es un enfoque exhaustivo. El clickoyente es un buen toque.

Keith DC el

4

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

Oneezy
fuente

1

Esa es la solución que estaba buscando. Esto es particularmente útil cuando tiene experiencias de pantalla táctil con elementos como li

Anand G

4

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

Ali Al Amine
fuente

3

Usa este código:

input:focus {
    outline: 0;
}

Touhid Rahman
fuente

2

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>

Expandir fragmento

1,21 gigavatios
fuente

1

Puedes probar esto también

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

o

.classname input{
outline-style: none;
}

Santosh Khalse
fuente

1

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

Rizo
fuente

0

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.

Shailesh
fuente

0

Prueba esto

*:focus {
    outline: none;
}

Esto afectaría a todas sus páginas

subindas pm
fuente

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

Respuestas:

Esta es una preocupación común.

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

Entonces, ¿cuál es la respuesta?