Me he desafiado a mí mismo para crear una experiencia visualmente dinámica e interactiva en HTML y CSS solamente (sin Javascript). Hasta ahora, no he encontrado ninguna característica que necesitara que no pudiera hacer en CSS y HTML puro. Este es quizás un poco más difícil.
Tengo que evitar que el usuario hace doble clic <a>
, <input type="submit">
y <button>
las etiquetas. Esto es para evitar que envíen dos veces un formulario o realicen accidentalmente 2 solicitudes GET a una URL. ¿Cómo se puede hacer esto en CSS puro? Incluso si no podemos establecer disabled
sin JS, debería haber alguna técnica de enmascaramiento o combinación de estilos que pueda manejarlo aquí en 2020.
Aquí hay un ejemplo simple de un intento:
.clicky:focus{
display: none;
pointer-events: none;
}
<a href="#down" class="clicky">test</a>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p id="down">target</p>
Desafortunadamente, esto lo deshabilita antes de que se active el evento de clic real por alguna razón. ¿Quizás las anclas no son la mejor manera de probar? Continuaré haciendo más intentos.
pointer-events: all
por defecto, pero no en los estados: activo o: ¿foco? ¿Como establecido pointer-events: none
para esos estados?
el:active, el:focus
combinado con eventos de puntero