Как сделать так, чтобы теги div и input оставались выделенными после кликов пользователя - PullRequest
Новая
       19

Как сделать так, чтобы теги div и input оставались выделенными после кликов пользователя

0 голосов
/ 21 ноября 2019

У меня есть скрипт викторины, который я хочу разработать, поэтому, когда пользователь нажимает на теги div / input, он остается выбранным с другим цветом фона.

Все, что мне удалось сделать, - это когда я нажимаю наdiv Я вижу, что фон div изменился,
, а также, когда я нажимаю на вход, я вижу, что цвет фона текста меняется и остается выбранным.
Но, как я уже сказал, я хочу, чтобы он оставался выделенным.

У меня также проблема в том, что когда я нажимаю на div, вход не выбирается.
Только если я нажимаю на входе только тогда, я вижу, что он выбран.

Вот код: 

.quest {
  padding: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  margin-bottom: 7px;
}

.quest:hover {
  padding: 5px;
  background-color: #ddffff;
  cursor: pointer;
  margin-bottom: 7px;
}

.quest:active {
  padding: 5px;
  background-color: #fef9a5;
  cursor: pointer;
  margin-bottom: 7px;
}

.rd {
  cursor: pointer;
}

.rd:checked+label {
  background-color: #fef9a5;
  cursor: pointer;
}
<form>
  <div class="quest">
    <input type="radio" name="test" class="rd" />
    <label><span class="rd">test</span></label>
  </div>
</form>

1 Ответ

0 голосов
/ 21 ноября 2019

Вы можете рассмотреть псевдоэлемент на этикетке для имитации вашего фона. Хитрость заключается в том, чтобы сделать его относительно элемента div, а не надписи: 

.quest {
  padding: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  margin-bottom: 7px;
  position:relative;
  z-index:0;
}

.quest:hover {
  background-color: #ddffff;
}

.rd {
  cursor:pointer;
}

.rd:checked+label {
  background-color: #fef9a5;
  cursor: pointer;
}
.rd:checked+label:before,
.quest:active label:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background-color: #fef9a5;
}
<form>
  <div class="quest">
    <input type="radio" name="test" class="rd" />
    <label><span class="rd">test</span></label>
  </div>
</form>
...