attributes - bootstrap - Firefox 4: ¿Hay alguna forma de eliminar el borde rojo en una entrada de formulario requerida?

label html

Question

Cuando se define el requisito en un campo de formulario, Firefox 4 muestra automáticamente un borde rojo en este elemento, incluso ANTES de que el usuario presione el botón Enviar.

<input type="text" name="example" value="This is an example" required />

Creo que esto es molesto para el usuario ya que no cometió errores al principio.

Quiero ocultar ese borde rojo para el estado inicial, pero mostrarlo cuando el usuario presiona el botón de enviar si falta un campo marcado como requerido.

Miré :required y :invalid desde el nuevo pseudo selector, pero los cambios son para antes y después de la validación. (de Firefox 4 Formulario de ingreso requerido borde ROJO / contorno )

¿Hay alguna forma de deshabilitar el borde rojo antes de que el usuario envíe el formulario y lo muestre si faltan algunos campos?

Answer 1

A partir de Firefox 26, el CSS real utilizado para identificar campos obligatorios no válidos es el siguiente (proviene de forms.css):

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

Para replicar en otros navegadores, uso:

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

Jugué con la configuración de píxeles, pero nunca hubiera adivinado el 1.5px sin mirar la fuente de moz.

Para deshabilitarlo, puedes usar:

input:invalid {
    box-shadow: none;
}

Answer 2

Aquí hay una solución muy fácil que funcionó para mí. Básicamente, cambié el rojo feo por un azul muy bonito, que es el color estándar para campos no obligatorios, y una convención web:

:required {
    border-color: rgba(82, 168, 236, 0.8);
}

Answer 3

Esto fue un poco complicado, pero he configurado este ejemplo: http://jsfiddle.net/c5aTe/ que está funcionando para mí. Básicamente, el truco parece ser sortear un texto de marcador de posición que no es válido. De lo contrario deberías poder hacer esto:

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

o algo similar...

PERO desde que FF4 decide validar el texto de su marcador de posición (no se sabe por qué ...), se requiere la solución en el violín (¡poco hacky - usos !important ).

¡Espero que ayude!

EDITAR

Doh !! - Me siento bien tonto. He actualizado mi fiddle: http://jsfiddle.net/c5aTe/2/ - puedes usar la clase pseudo :focus para mantener el elemento con estilo como si fuera válido mientras el usuario está escribiendo. Esto aún se resaltará en rojo si el contenido no es válido cuando el elemento pierde el enfoque, pero creo que hay mucho que puedes hacer con el comportamiento diseñado ...

HTH :)

EDITAR después de la aceptación:

Resumen de ejemplos a solicitud de OP (tenga en cuenta que los dos primeros solo están diseñados para FF4, no para Chrome )

1. Corrección para FF que valida el texto de tu marcador de posición: http://jsfiddle.net/c5aTe/
2. Corrección para la validación FF mientras escribe: http://jsfiddle.net/c5aTe/2
3. Solución de JS para alternar estilos / validación: http://jsfiddle.net/c5aTe/4

Answer 4

Esto funcionó bien para mí:

input:invalid {
     -moz-box-shadow: none;
}

Answer 5

Por favor, intente esto,

$ ("form"). attr ("novalidate", true);

para su formulario en su archivo .js global o en la sección de encabezado.