У меня есть ряд параметров, которые являются флажком и изображением .. Я бы хотел, чтобы когда пользователь выбирает изображение или флажок, он выделяет изображение рамкой или чем-то еще ... могу ли я добиться этого с помощью чистого CSS?

Вот отрывок

<style>


.highlight {
    opacity: 0.7;
}

.highlight:hover {
    opacity: 1;
}  

</style>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span style="display:none;">1. </span>
<label>
<input class="wpProQuiz_questionInput" type="checkbox" name="question_1_1" value="1" style="
    /* display: none !important; */"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1a.png" alt="" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span style="display:none;">1. </span>
<label>
<input class="wpProQuiz_questionInput" type="checkbox" name="question_1_2" value="1" style="
    /* display: none !important; */"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1b.png" alt="" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
1
Craig Johnstone 15 Сен 2018 в 21:35

2 ответа

Лучший ответ

Вы имеете в виду это? вы можете использовать селектор соседних братьев css

.highlight {
  opacity: 0.7;
}

.highlight:hover {
  opacity: 1;
}

.wpProQuiz_questionInput:checked + img {
  border: 1px solid #f00;
}
<li class="wpProQuiz_questionListItem" data-pos="0">
  <span style="display:none;">1. </span>
  <label for="1">
<input id="1" class="wpProQuiz_questionInput" type="checkbox" name="question_1_1" value="1"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1a.png" alt="pic1" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
<li class="wpProQuiz_questionListItem" data-pos="0">
  <span style="display:none;">1. </span>
  <label for="2">
<input id="2" class="wpProQuiz_questionInput" type="checkbox" name="question_1_2" value="1"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1b.png" alt="pic2" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
2
Chris Li 15 Сен 2018 в 18:41

Если вы хотите дать эффект при нажатии, вы должны использовать:

.highlight:active,.highlight:focus {
        border:1px solid red;
} 
0
Akshay Jain 15 Сен 2018 в 18:42