How to disable submit button & links on-click in pure CSS? - html

Question

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;
}
test
<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.

Answer 1

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">
Click me
<span></span>
</div>

Answer 2

The first solution
The idea is to use radio button state by :checked to make modifications. We hide radio circle and when :checked for <a> make pointer-events: none; and for buttons with different types we hide them and show disabled ones.
div {
margin: 10px;
}
#radio0, .my-checkbox {
position: absolute;
height: 0;
width: 0;
opacity: 0;
}
#radio0 + a label {
cursor: pointer;
}
#radio0:checked+a {
pointer-events: none;
}
.btn-one,
.btn-two {
padding: 0;
}
.btn-one>label,
.btn-two>label {
padding: 1px 6px;
}
.my-checkbox:checked+.btn-one {
display: none;
}
.btn-two {
display: none;
}
.my-checkbox:checked+.btn-one+.btn-two {
display: inline-block;
}
<div>
<input id="radio0" type="radio" onclick="console.log('radio0 clicked!')">
<a href="#">
<label for="radio0">
Click the link!
</label>
</a>
</div>
<div>
<input type="radio" id="radio1" class="my-checkbox">
<button type="button" class="btn-one" onclick="console.log('radio1 clicked!')">
<label for="radio1">Click the button!</label>
</button>
<button type="button" class="btn-two" onclick="console.log('radio1 NOT clicked!')" disabled>
<label for="radio1">Click the button!</label>
</button>
</div>
<div>
<input type="radio" id="radio2" class="my-checkbox">
<button type="submit" class="btn-one" onclick="console.log('radio2 clicked!')">
<label for="radio2">Submit!</label>
</button>
<button type="submit" class="btn-two" onclick="console.log('radio2 NOT clicked!')" disabled>
<label for="radio2">Submit!</label>
</button>
</div>
The second solution
This one suits for links. The idea is to use :target. Targe element is hidden firstly. Then when is targeted use :target to pointer-events: none; of <a>.
#anchor {
display: none;
}
#anchor:target {
display: block;
}
#anchor:target+a {
pointer-events: none;
}
<div>
<span id="anchor"></span>
Click the link!
</div>