邊境時，單選按鈕可見性隱藏

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