css to highlight image of selected <Input> box

Question

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

Chris Li · Accepted Answer · 2018-09-15 18:41:51Z

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>

Akshay Jain · Accepted Answer · 2018-09-15 18:42:14Z

0

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

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

answered Sep 15, 2018 at 18:42

Akshay Jain

7901 gold badge7 silver badges23 bronze badges

Collectives™ on Stack Overflow

css to highlight image of selected <Input> box

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related