选中时，CSS复选框突出显示带边框的图像

Question

您好我有一个wp网站，其中包含联系表格7插件..

我已经设置了一些带有内容图像的复选框的表单..这里是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/