html - CSS复选框在选中时突出显示带边框的图像

Question

您好，我有一个带有联系表格 7 插件的 wp 网站..

我已经设置了一些带有内容图像的复选框的表单。这是 html

这是一个jsfiddle

我试图在选中复选框时在图像周围制作边框...

<div role="form" class="wpcf7" id="wpcf7-f299-p295-o1" lang="en-US" dir="ltr">
  <div class="screen-reader-response"></div>
  <form action="/apply-for-trial/#wpcf7-f299-p295-o1" method="post" class="wpcf7-form" novalidate="novalidate">
    <div class="trials-option">
      <label>
        <span class="wpcf7-form-control-wrap trials-list">
    <span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required"><span class="wpcf7-list-item first last">
    <input type="checkbox" name="trials-list[]" value="trial 1">&nbsp;
    <span class="wpcf7-list-item-label">trial 1</span>
        </span>
        </span>
        </span>
        <img src="http://clinics.dsgthemes.com/wp-content/uploads/2016/01/trial-16.png">
        <br>
      </label>
    </div>

  </form>
</div>

再次尝试让 img inside 标签在被选中时有一个边框。我添加了一个使复选框变大的类，只是为了验证我是否选中了复选框。问题是我没有选择 img，而且我想不出一种方法来做到这一点。

#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked {
  height: 25px;
  width: 25px;
}

#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked ~ img {
  border: 3px solid #888;
}

试过这种方式:(但它不是紧跟在复选框之后..)

#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked + img {
  border: 3px solid #888;
}

还有很多其他的..我似乎无法理解，有什么帮助吗？

Answer 1

您可以像这样重构 DOM:

HTML

<form action="/apply-for-trial/#wpcf7-f299-p295-o1" method="post" class="wpcf7-form" novalidate="novalidate">
    <div class="trials-option">
      <label>
        <span class="wpcf7-form-control-wrap trials-list">
           <span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
             <span class="wpcf7-list-item first last">
                <span class="wpcf7-list-item-label">trial 1</span>
                <input type="checkbox" name="trials-list[]" value="trial 1">&nbsp;<img src="http://clinics.dsgthemes.com/wp-content/uploads/2016/01/trial-16.png">
             </span>
           </span>
        </span>
      </label>
    </div>
</form>

然后在你的 CSS 中使用这个选择器

CSS

.trials-option input[type="checkbox"]:checked + img {
  border: 3px solid #888;
}

演示

https://jsfiddle.net/5L6waw1d/2/