嵌套在输入中时如何设置复选框的样式

Question

Unlike the normal method of styling.... I have a Wordpress plugin that nests the input checkbox with the label.

I'm 90% sure that I can't do this with CSS alone due to the parent-child relationship and I have tried and failed in that regard. Markup I have is:

<label class="bundled_product_optional_checkbox">
<input class="bundled_product_checkbox" type="checkbox" name="bundle_selected_optional_1" value=""> 
Add for 
<span class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">£</span>30.00
</span>
<small class="woocommerce-price-suffix">ex. VAT</small>
</span>
</label>

I'd like a custom image for the checkmark and on checked. Do I need to do this in CSS + js?

Answer 1

In your case, to look exactly the way you need it, I believe this JavaScript code will be the best solution for you:

<label class="bundled_product_optional_checkbox">
    <input class="bundled_product_checkbox" type="checkbox" name="bundle_selected_optional_1" value=""> 
    Add for 
    <span class="price">
        <span class="woocommerce-Price-amount amount">
            <span class="woocommerce-Price-currencySymbol">£</span>30.00
            </span>
        <small class="woocommerce-price-suffix">ex. VAT</small>
    </span>
    <
</label>

<style type="text/css">
    .bundled_product_optional_checkbox .bundled_product_checkbox{
        display: none;
    }
    .bundled_product_optional_checkbox .custom-checkbox{
        content: "";
        width: 20px;
        height: 20px;
        display: inline-block;
        border: 2px solid blue;
        position: left;
        border-radius: 5px;
    }
    .bundled_product_optional_checkbox .bundled_product_checkbox:checked + .custom-checkbox{
        background: blue;
    }
</style>

<script type="text/javascript">
    jQuery( function( $ ){
        $('.bundled_product_optional_checkbox .bundled_product_checkbox').after('<span class="custom-checkbox"></span>');
    } );
</script>