边境时，单选按钮可见性隐藏

Question

这个选择是从WordPress后台（元）代码→

<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