css to highlight image of selected <Input> box

2399 views html
-1

I have a row of options which are checkbox and an image.. I'd like it when the user selects the image or the checkbox that it highlights the image with a border or whatever.. can I achieve this with pure css?

here's a snipet

<style>


.highlight {
    opacity: 0.7;
}

.highlight:hover {
    opacity: 1;
}  

</style>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span >1. </span>
<label>
<input 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="" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span >1. </span>
<label>
<input 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="" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>

answered question

2 Answers

13

You mean like this? you can use the css adjacent sibling selector

.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>

posted this
13

If you want give effect on click then you have to use:

.highlight:active,.highlight:focus {
        border:1px solid red;
} 

posted this

Have an answer?

JD

Please login first before posting an answer.