I have challenged myself to create a visually dynamic and interactive experience in HTML and CSS only (No Javascript). So far, I haven't come across any feature I needed that I couldn't do in pure CSS and HTML. This one is perhaps a bit more difficult.
I need to prevent the user from double-clicking<a>, <input type="submit"> and <button> tags. This is to prevent them double-submitting a form or accidentally making 2 GET requests to a URL. How can this be done in pure CSS? Even if we can't set disabled without JS, there should be some masking technique or combination of styles that can handle it here in 2020.
Here is a simple example of an attempt:
.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>Unfortunately, this disables it before the actual click event is fired for some reason. Maybe anchors aren't the best way to test? I will continue to make further attempts.
One idea is to have a layer that come on the top of the element after the first click to avoid the second one.
Here is a basic idea where I will consider a duration of 1s between two clicks that you can decrease. Try to click the button/link and you will notice that you can click again only after 1s.
I am adding a small overlay to better see the trick
.button {
position:relative;
display:inline-block;
}
.button span{
position:absolute;
top:0;
left:0;
right:0;
bottom:100%;
z-index:-1;
animation:overlay 1s 0s; /* Update this value to adjust the duration */
transition:0s 2s; /* not this one! this one need to be at least equal to the above or bigger*/
}
.button *:active + span {
animation:none;
bottom:0;
transition:0s 0s;
}
@keyframes overlay {
0%,100% {
z-index:999;
background:rgba(255,0,0,0.2); /* To illustrate */
}
}<div class="button">
<button>Click me</button>
<span></span>
</div>
<div class="button">
<a href="#" onclick="console.log('clicked !')">Click me</a>
<span></span>
</div>