Recientemente descubrí que la pseudoclase :invalid
se aplica a los elementos de formulario required
tan pronto como se carga la página. Por ejemplo, si tiene este código:Retraso HTML5: pseudoclase no válida hasta el primer evento
<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />
Luego su página se cargará con un elemento de entrada rosa vacío en ella. Tener la validación incorporada en HTML5 es excelente, pero no creo que la mayoría de los usuarios esperen que el formulario valide antes de que hayan tenido la oportunidad de ingresar ningún valor. ¿Hay alguna manera de retrasar la aplicación de la pseudoclase hasta que el primer evento afecte a ese elemento (envío de formulario, desenfoque, cambio, lo que sea apropiado)? ¿Es posible hacer esto sin JavaScript?
"No es ideal de ninguna manera". En efecto. ¿Hay alguna forma de aplicar el estilo a contenido válido, pero no obligatorio, una vez que el elemento ha perdido el enfoque? No he encontrado una manera de hacer esto. –
Podría imaginar una clase pseduo (no existente actualmente) para formularios como "enviado" para que esto actúe como un selector principal para cualquier entrada contenida, como '#myform: entrada enviada: requerida: inválida'. Porque a pesar de que este escenario actual no es intuitivo, no es necesariamente realista esperar que el CSS sepa que un campo no es válido bajo circunstancias específicas (¿por qué no debería hacerlo de inmediato, por lo que sabe?), Entonces realmente desea vincular el estilo de entrada con el estado del formulario, no la entrada en sí (por ejemplo, cuando el campo obligatorio está vacío Y se envía el formulario principal). – Anthony
Esta respuesta: https: // stackoverflow.com/questions/41619497/how-to-make-pseudo-class-invalid-apply-to-a-input-after-submitting-a-form en realidad trata esto bien, creo, incluso si requiere un poco de javascript . Simplemente agrega una clase "enviada" al formulario (¡tal como lo sugería!) Para que las reglas de estilo puedan ser 'form.submitted input: required: invalid' – Anthony