单选按钮可见性隐藏

Question

这是来自WordPress后端（Meta）→

的代码

 <div class="cmb-td">
    <ul class="cmb2-radio-list cmb2-list">  
        <li><input type="radio" class="cmb2-option" name="_yourprefix_demo_radio_images" id="_yourprefix_demo_radio_images1" value="img1"> <label for="_yourprefix_demo_radio_images1"><img src="http://via.placeholder.com/350x150/E8117F/ffffff?text=Image%201" alt="Image 1" title="Image 1"></label></li>
        <li><input type="radio" class="cmb2-option" name="_yourprefix_demo_radio_images" id="_yourprefix_demo_radio_images2" value="img2"> <label for="_yourprefix_demo_radio_images2"><img src="http://via.placeholder.com/350x150/f9a82f/ffffff?text=Image%202" alt="Image 2" title="Image 2"></label></li>
        <li><input type="radio" class="cmb2-option" name="_yourprefix_demo_radio_images" id="_yourprefix_demo_radio_images3" value="img3"> <label for="_yourprefix_demo_radio_images3"><img src="http://via.placeholder.com/350x150/49aed7/ffffff?text=Image%203" alt="Image 3" title="Image 3"></label></li>
    </ul>
    <p class="cmb2-metabox-description">Use images for the radio button labels</p>

这实际上来自Wordpress的核心，因此我们几乎无法更改实际的HTML。

.cmb2-option: checked {
visibility: hidden;
}

我正在上面隐藏单选按钮，因为我想让选择显示为来自所选图像，但如何在所选图像周围创建边框？

Answer 1

如果JS被允许，那么在小JS和CSS的帮助下，只要html结构有限制，你就可以实现它。

CSS：

 .cmb2-option:checked ~ label {
    border: 1px solid black;
  }

  .cmb2-list {
    position: relative;
    overflow: hidden;
  }

  .cmb2-list input {
    position: absolute;
    left: -999px;
  }

JS：

$(document).ready(function() {
  $(document).on("click", ".cmb2-radio-list", function() {
    $(this).find("input").trigger('click');
  });
});

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

您可以使用兄弟选择器来实现：

.cmb2-option:checked ~ label {
   border: 2px solid whitesmoke;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors