2

input и label объединены через атрибут for. При выборе, происходит анимация и появляется галка. Нет проблем.

input[type="checkbox"] {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label {
    border: 0px;
    padding: 0px;
    margin: 0px;
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label::before {
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label img {
    height: 200px;
    width: 200px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

:checked+label {
    border-color: #ddd;
}

:checked+label::before {
    content: "✓";
    background-color: #007bff;
    transform: scale(1);
    z-index: 1;
}

:checked+label img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: -1;
}
<div class="card">
  <input type="checkbox" data-index="1" id="id">    
  <label for="id">
    <img class="card-playlist-cover card-img-top" src="https://sun1-23.userapi.com/impf/c639325/v639325774/5894a/8OswStnRDhI.jpg?size=300x300&amp;quality=96&amp;proxy=1&amp;sign=c1512d2e4d19c04eea49447fc0151e47&amp;c_uniq_tag=jt8OErG6NqqwrBQMzq5hih_0eL3-7jb83jlzgYvZs50&amp;type=audio" alt="Said The Sky">
    <div class="m-2">
      <div class="text-truncate">Said The Sky</div><small class="text-muted">Треков: 37</small>
    </div>
  </label></div>

Хочу поместить input внутрь label и удалить for. Но не удается перенести анимацию. Галка не появляется. В чем причина?

input[type="checkbox"] {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label {
    border: 0px;
    padding: 0px;
    margin: 0px;
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label::before {
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label img {
    height: 200px;
    width: 200px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

label > :checked {
    border-color: #ddd;
}

label::before > :checked {
    content: "✓";
    background-color: #007bff;
    transform: scale(1);
    z-index: 1;
}

label > :checked + img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: -1;
}
<div class="card"> 
  <label>
    <input type="checkbox" data-index="1">   
    <img class="card-playlist-cover card-img-top" src="https://sun1-23.userapi.com/impf/c639325/v639325774/5894a/8OswStnRDhI.jpg?size=300x300&amp;quality=96&amp;proxy=1&amp;sign=c1512d2e4d19c04eea49447fc0151e47&amp;c_uniq_tag=jt8OErG6NqqwrBQMzq5hih_0eL3-7jb83jlzgYvZs50&amp;type=audio" alt="Said The Sky">
    <div class="m-2">
      <div class="text-truncate">Said The Sky</div><small class="text-muted">Треков: 37</small>
    </div>
  </label></div>

1
  • 1
    Селектор label::before > :checked ошибочный. В псевдоэлементе :before нет чекбокса. А если бы и был, то данный селектор бы на чекбокс дейстовал. Прошлый вариант работал из-за плюса в селекторе. Здесь вам тоже нужно сделать какой-то элемент после чекбокса, на который подействует плюс или тильда.
    – user347472
    11 фев 2021 в 16:35

1 ответ 1

3

Удалось перенести анимацию и галку. Спасибо комментарию.

input[type='checkbox'] {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label {
    border: 0px;
    padding: 0px;
    margin: 0px;
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flag-check::before {
    color: white;
    content: ' ';
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.5s;
    transform: scale(0);
}

label img {
    height: 200px;
    width: 200px;
    transition-duration: 0.5s;
    transform-origin: 50% 50%;
}

:checked ~ .flag-check::before  {
    content: "✓";
    background-color: #007bff;
    transform: scale(1);
    z-index: 20;
}

label > :checked + img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: 2;
}
<div class="card">   
  <label>
    <input type="checkbox" data-index="1"> 
    <img class="card-playlist-cover card-img-top" src="https://sun1-23.userapi.com/impf/c639325/v639325774/5894a/8OswStnRDhI.jpg?size=300x300&amp;quality=96&amp;proxy=1&amp;sign=c1512d2e4d19c04eea49447fc0151e47&amp;c_uniq_tag=jt8OErG6NqqwrBQMzq5hih_0eL3-7jb83jlzgYvZs50&amp;type=audio" alt="Said The Sky">
    <div class="flag-check m-2">
      <div class="text-truncate">Said The Sky</div><small class="text-muted">Треков: 37</small>
    </div>
  </label></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.