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>

嵌套在输入中的复选框的样式

1 个答案: