Как отключить кнопку отправки и ссылки при нажатии в чистом виде CSS?

Question

Я поставил перед собой задачу создать визуально динамичный c и интерактивный опыт только в HTML и CSS (Нет Javascript). До сих пор я не сталкивался с какой-либо функцией, которая мне была бы нужна, если бы я не использовал чистые CSS и HTML. Возможно, это немного сложнее.

Мне нужно, чтобы пользователь не мог дважды щелкнуть теги <a>, <input type="submit"> и <button>. Это сделано для того, чтобы они не могли дважды отправить форму или случайно сделать 2 запроса GET на URL. Как это можно сделать в чистом CSS? Даже если мы не сможем установить disabled без JS, должна быть некоторая техника маскирования или комбинация стилей, которые могут справиться с этим здесь в 2020 году.

Вот простой пример попытки:

.clicky:focus{
  display: none;
  pointer-events: none;
}

<a href="#down" class="clicky">test</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p id="down">target</p>

К сожалению, это отключает его до того, как по какой-то причине произойдет фактическое событие щелчка. Может быть, якоря не лучший способ проверить? Я буду продолжать предпринимать дальнейшие попытки.

Answer 1

Одна идея состоит в том, чтобы иметь слой, который появляется сверху элемента после первого щелчка, чтобы избежать второго.

Вот базовая c идея, где я буду рассматривать продолжительность 1s между двумя кликами, которые вы можете уменьшить. Попробуйте нажать кнопку / ссылку, и вы заметите, что вы можете нажать снова только после 1s.

Я добавляю небольшой оверлей, чтобы лучше видеть трюк

.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>

Answer 2

Первое решение

Идея состоит в том, чтобы использовать radio button состояние :checked для внесения изменений. Мы скрываем круг radio, а когда :checked для <a> делаем pointer-events: none; и для buttons с разными типами, мы скрываем их и показываем disabled единицы.

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>

Второе решение

Это подходит для links. Идея состоит в том, чтобы использовать :target. В первую очередь скрывается цель element. Затем, когда намечено использовать :target до pointer-events: none; из <a>.

#anchor {
  display: none;
}

#anchor:target {
  display: block;
}

#anchor:target+a {
  pointer-events: none;
}

<div>
  <span id="anchor"></span>
  <a href="#anchor" onclick="console.log('anchor clicked!')">Click the link!</a>
</div>