Добавить пульсацию на чекбокс

Question

Пытался добавить box-shadow для checkbox`a

.warning-pulse {
animation: checkbox-pulse 1.2s infinite;
}

@keyframes checkbox-pulse {
0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
}
70% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
}
100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
}

}

Вот код чекбокса

<input type="checkbox" class="warning-pulse">

Проблема в том, что при добавлении анимации с box-shadow тень не учитывает закруглённость чекбокса - это как выглядит тень.

Вопрос, как можно создать чекбокс чтобы у него была нормальная анимация с box-shadow? Если необходимо создавать свой чекбокс, то можно ли как-то без JS сделать, чтобы при checked кастомного чекбокса был checked основного? Это по сути обязательно, ведь иначе код сайта поломается. Если не получится с box-shadow, то может быть можно сделать с background-color ?

Заранее спасибо

Answer 1

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

.checkbox {
  display: inline-flex;
  position: relative;
}

.warning-pulse {
  margin: 0;
}

.warning-pulse + .pulse {
  animation: checkbox-pulse 1.2s infinite;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  position: absolute;
  left: 1px;
  top: 1px;
  z-index: -1;
}

.pulse.rounded {
  border-radius:50%;
}


@keyframes checkbox-pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

<div class="checkbox">
  <input type="checkbox" class="warning-pulse">
  <div class="pulse"></div>
</div>

<br><br>

<div class="checkbox">
  <input type="checkbox" class="warning-pulse">
  <div class="pulse rounded"></div>
</div>

Можно полностью сбросить все стили отображения (и видимость) чекбокса при помощи свойства appearance:none, заменив их собственными. Это не повлияет на логику работы чекбокса и смену состояния checked.

БЛОГ НА HUSL

Добавить пульсацию на чекбокс

Ответы (1 шт):