Как оформить флажок, если он вложен во вход

Question

В отличие от обычного метода стилей .... У меня есть плагин Wordpress, который вкладывает флажок ввода с меткой.

Я на 90% уверен, что не могу сделать это только с помощью CSS из-заотношениям родитель-ребенок, и я пытался и потерпел неудачу в этом отношении. У меня есть разметка:

<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>

Я бы хотел, чтобы пользовательская картинка была отмечена галочкой и была включена. Нужно ли делать это в CSS + js?

Answer 1

В вашем случае, чтобы выглядеть именно так, как вам нужно, я считаю, что этот код JavaScript будет лучшим решением для вас:

<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>