Стилизация checkbox, выход галочки за пределы фона

Рейтинг: 0Ответов: 1Опубликовано: 10.05.2023

Необходимо, чтобы галочка выходила за пределы фона, но фон (фоновое изображение) должен быть меньше, чем галочка.

Пример, как он должен выглядеть:

введите сюда описание изображения

Код который у меня уже есть:

.checkbox {}

input[type="checkbox"] {
  display: none;
}

label:before {
  content: " ";
  color: #000;
  display: inline-block;
  font: 20px/30px Arial;
  margin-right: 15px;
  position: relative;
  text-align: center;
  text-indent: 0px;
  width: 30px;
  height: 30px;
  background: #FFF;
  border: 1px solid #e3e3e3;
  border-image: initial;
  vertical-align: middle;
}

input:checked+label:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(/images/checkbox/done.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

input:disabled+label:before {
  background: #eee;
  color: #aaa;
}
<div class="checkbox">
  <input type="checkbox" id="checkbox" />
  <label for="checkbox"></label>
</div>

Как правильно сверстать данный checkbox?

css html input checkbox
Источник: Stack Overflow на русском

Ответы

▲ 0

Не вижу проблемы - если Вы не будете использовать для блоков свойство overflow: hidden, то любое содержимое выходящее за границы родителя будет видно:

.checkbox {
  margin: 5px 40px 5px 5px;
  display: inline-block;
}

.checkbox > input {
  position: absolute;
  opacity: 0;
}

label {
  display: inline-grid;
  place-items: center;
  width: 145px; height: 140px;
  border-radius: 55px;
  background-color: #e8e8e8;
  transform: rotate(-15deg);
  transition: .2s ease;
}
input:focus + label,
input:hover + label {
  box-shadow: 0 0 1px 3px #777, inset 0 0 1px 4px #777;
}

label::before {
  content: '';
  position: absolute;
  display: block;
  width: 140px; height: 95px;
  transform: rotate(-32deg) translate(34%, -17%);
  background: 0 7.5px / 15px calc(100% - 15px) linear-gradient(180deg, #7e0300, #b40001), 7.5px 100% / calc(100% - 15px) 15px linear-gradient(90deg, #b40001, #f50000), radial-gradient(circle 15px at left 7.5px top 7.5px, #7e0300 7px, #fa00 8px), radial-gradient(circle 15px at left 7.5px bottom 7.5px, #b40001 7px, #fa00 8px), radial-gradient(circle 15px at right 7.5px bottom 7.5px, #f50000 7px, #fa00 8px);
  background-repeat: no-repeat;
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  filter: drop-shadow(-3px 3px 3px #0008) hue-rotate(calc(var(--hue, 0) * 1deg));
  transition: opacity .2s ease-out, clip-path 0s .2s;
}
input:checked + label::before {
  opacity: 1;
  clip-path: polygon(-10% 0, 100% 0, 110% 100%, 0 200%);
  transition: opacity 0s, clip-path .5s ease-out;
}
<div class="checkbox" style="--hue:0">
  <input type="checkbox" id="checkbox1"><label for="checkbox1"></label>
</div>
<div class="checkbox" style="--hue:150">
  <input type="checkbox" id="checkbox2"><label for="checkbox2"></label>
</div>
<div class="checkbox" style="--hue:220">
  <input type="checkbox" id="checkbox3"><label for="checkbox3"></label>
</div>