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

quitar sombra css

Question

Cuando un elemento html está ''enfocado'' (actualmente seleccionado / tabulado en), muchos navegadores (al menos Safari y Chrome) colocarán un borde azul 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 deja controlarlo con

border: x;

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

Pero conseguir que Safari elimine este poco de bengala sería bueno.

Answer 1

Esta es una preocupación común.

El outline 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>

El "arreglo" más común que más recomienda es el outline:none , que si se usa incorrectamente, es un desastre para la accesibilidad.

Entonces ... ¿de qué sirve el contorno?

Hay un sitio web muy bien definido que lo explica todo bien.

Proporciona comentarios visuales para enlaces que tienen "enfoque" cuando 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 tener una discapacidad visual. Si elimina el esquema, está haciendo que su sitio sea inaccesible para estas personas.

Ok, intentémoslo con el mismo ejemplo anterior, ahora use la tecla TAB 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 enfoque incluso sin hacer clic en la entrada?

Ahora, intentemos outline:none en nuestro <input> confianza

Entonces, una vez más, use la tecla TAB 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 averiguar dónde está el enfoque? El único signo revelador es el cursor parpadeando. Mi ejemplo anterior es demasiado simplista. En situaciones reales, 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>

Así que hemos establecido los siguientes

1. Los esquemas 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.

Quito el contorno y agrego un borde inferior en :focus y :active . También elimino los bordes predeterminados en los lados superior, izquierdo y derecho al establecerlos en transparentes :focus y :active (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 se puede ampliar 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 Materialize

Puedes terminar con algo que no sea feo y que funcione 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>

Answer 2

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

*:focus {
outline: none;
}

Esto eliminará el borde azul!

Este es un ejemplo de trabajo: JSfiddle.net

¡Espero eso ayude!

Answer 3

Eliminar todos los estilos de enfoque es malo para la accesibilidad y los usuarios de teclado en general. Pero los esquemas son feos y proporcionar un estilo enfocado a la medida 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/>

Answer 4

Elimine el contorno cuando el foco esté en el elemento, utilizando la siguiente propiedad CSS:

input:focus {
    outline: 0;
}

Esta propiedad de CSS elimina el esquema de todos los campos de entrada en el enfoque o usa una pseudo clase para eliminar el esquema del elemento utilizando la siguiente propiedad de CSS.

.className input:focus {
    outline: 0;
} 

Esta propiedad elimina el contorno para el elemento seleccionado.

Answer 5

En tu caso, prueba:

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

O, en general, afectar a 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 respaldar los elementos que tienen el atributo contenteditable establecido en true (convirtiéndolos en un tipo de elemento de entrada). Lo siguiente también debe apuntar a esos (en navegadores compatibles con CSS3):

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

Aunque no lo recomendaría, para completar, siempre podría desactivar 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; Indica al usuario en qué elemento está enfocado actualmente.

Answer 6

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

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

Answer 7

Esto me confundió durante algún tiempo hasta que descubrí que la línea no era ni un borde ni un contorno, 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;
}

Answer 8

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

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

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

Answer 9

Ninguna de las soluciones me funcionó en Firefox.

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

Efectivamente, he hecho que el borde de enfoque pase de un brillo azul de 3px a un estilo de borde que coincida con el borde del área de texto. Aquí hay algunos estilos de borde:

Borde discontinuo (borde 2px discontinua rojo):

¡Sin bordes! (borde 0px):

Borde Textarea (borde 1px gris sólido):

Aquí está el código:

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

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

Answer 10

Para eliminarlo de todas las entradas.

input {
 outline:none;
}

Answer 11

Prueba esto tambien

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

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

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

Answer 13

Puedes probar esto también

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

o

.classname input{
outline-style: none;
}

Answer 14

Usa este código:

input:focus {
    outline: 0;
}