Я пытаюсь создать элементы DIV, которые работают как флажки. Причина, по которой мне нужно, чтобы они были флажками, заключается в том, что я буду использовать их для сбора информации для обработки в форме PHP позже. Я не уверен, что происходит, но все работает не так, как я себе представлял. Вот пример кода ниже. Я также сделал CodePin для игры.

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

HTML:

<div id='grid'>
    <input type="checkbox" value="2" id="r2">
    <label class="tile" for="r2">
      <div class="title">
        <img class='tile_pic' src='../resources/pics/default.png'>
        <div class='tile_title'>Laura Test</div>
      </div>
    </label>
    <div id='tile'>
        <img class='tile_pic' src='../resources/pics/default.png'>
        <div class='tile_title'>Jayson Test</div>
    </div>
    <div id='tile'>
        <img class='tile_pic' src='../resources/pics/default.png'>
        <div class='tile_title'>Gabriel Test</div>
    </div>
</div>

CSS:

#grid input[type=checkbox] {display: none;}
#grid input[type=checkbox]:checked + .whatever{background-color: green;}

#grid {
  max-width: 1880px;
  margin: 0 auto;
  display: grid;
  grid-gap: 20px;}

#tile {
  width: 150px; height: 190px;
  font-size: 1rem;
  background-color: white;
  border-radius: 4%;
  overflow: hidden;
  text-align: center;
  box-shadow: 3px 4px #CECECE}
  #tile img{max-width: 100%; max-height: 100%; display: block;}
  #tile:hover {background-color: #BFB3E6; box-shadow: 3px 4px #9E999E}

.tile_pic{
  width: 150px;
  height: 150px;
  object-fit: cover;}

.tile_title {
  margin-top: 10px;
  font-family: 'Rubik', sans-serif;}

  @media (min-width: 430px) {#grid { grid-template-columns: repeat(2, 1fr); }}
  @media (min-width: 660px) {#grid { grid-template-columns: repeat(3, 1fr); }}
  @media (min-width: 890px) {#grid { grid-template-columns: repeat(4, 1fr); }}
  @media (min-width: 1120px) {#grid { grid-template-columns: repeat(5, 1fr); }}
  @media (min-width: 1350px) {#grid { grid-template-columns: repeat(6, 1fr); }}
  @media (min-width: 1580px) {#grid { grid-template-columns: repeat(7, 1fr); }}
0
user14919988 22 Фев 2021 в 01:07

1 ответ

Лучший ответ

Здесь я создал простой флажок с анимацией, используя только html и css. Изменение div возможно, потому что он находится в теге label. Метка может использоваться для изменения отмеченного состояния входа. Используя тильду, мы можем выбрать последующего брата элемента (источник). В этом примере нужно выбрать родственную метку, после чего мы можем выбрать класс внутри нее.

Вход должен быть скрыт, по этой причине был создан скрытый класс. Класс был создан для div, из которого мы хотим изменить CSS. В этом примере я создал простой флажок, который меняется при включении, но, конечно, можно применить любой CSS.

Надеюсь, это поможет вам в решении вашей проблемы. Если вам понадобится дополнительная помощь, дайте мне знать :)

.hidden {
  display: none;
}

.divcheckbox {
  cursor: pointer;
  position: relative;
  border-radius: .2em;
  width: 2em;
  height: 2em;
  background-color: crimson;
  transition: background-color .2s;
}

.divcheckbox::after,
.divcheckbox::before {
  content: '';
  position: absolute;
  background-color: white;
  height: .2em;
  transition: .2s ease-in-out;
}

.divcheckbox::after {
  top: .95em;
  left: .25em;
  transform: rotateZ(45deg);
  width: 1.5em;
}

.divcheckbox::before {
  top: .95em;
  left: .25em;
  transform: rotateZ(-45deg);
  width: 1.5em;
}

input:checked ~ label .divcheckbox {
  background-color: cornflowerblue;
}

input:checked ~ label .divcheckbox::before {
  top: 1em;
  left: .6em;
  width: 1.25em;
}

input:checked ~ label .divcheckbox::after {
  top: 1.2em;
  left: .2em;
  width: .8em;
}
 <input type="checkbox" class="hidden" id="checkbox" checked/>
<label for="checkbox"> <div class="divcheckbox"></div> </label>
2
controlol 21 Фев 2021 в 23:25