OK, por lo que en los navegadores HTML5 se puede tener:¿Qué CSS usan los navegadores para el estilo no válido <input type = "email"> s?
<input class="txt-box" type="email" name="email" rel="required" />
Cuando el correo electrónico no está en el formato adecuado que pone un cuadro rojo alrededor de ella.
Mi pregunta es: ¿cuál es el CSS que determina ese estilo?
Depende del navegador. Esto debería cubrir sus bases:
input:invalid, input:-moz-ui-invalid {
border:0;
outline:none;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
probar el efecto en un navegador compatible con:
input[type="email"] {
border:0;
outline:none;
box-shadow:none;
}
cumplimiento IE7 requeriría:
input.txt-box {
border:0 !important;
outline:none !important;
box-shadow:none;
}
que diseñaría su estado predeterminado ... no es un estado no válido. –
Correcto, aunque no sabía que podía seleccionar campos de formularios como ese, le votaré uno por eso. Aún necesita averiguar el estado inválido. –
sí, eso no hizo nada. firbug muestra el estilo que agregué, pero el contorno rojo todavía está allí. –
Si instala la extensión Firebug en Firefox y la utiliza para inspeccionar el campo de formulario en cuestión, podrá ver el CSS que usa Firefox internamente para darle un estilo. (. Asegúrese de que “Mostrar User Agent CSS” está marcada en el menú emergente de la ficha Estilo)
En Firefox 5 en mi Mac, utiliza el siguiente CSS:
:-moz-ui-invalid:not(output) {
box-shadow: 0 0 1.5px 1px red;
}
interesante que utilizan box-shadow. Hubo una pregunta sobre Stack Overflow que vi hace poco que mencionó el selector :-moz-ui-invalid: vea Style HTML5 input types if validation fails.
Gracias @Paul, no estaba seguro de cómo redactar la pregunta. –
aquí está la URL: http: //jasonspickdesign.com/contact.php –
, eres muy bienvenido, no estoy seguro si lo hice mucho más claro, es uno de esos complicados. –