由于 css 干扰引导 css，勾选标记大小在复选框内减小

Question

我有一个有效的复选框代码。当我编码时，这完全正常。但是，在实际项目中也包含引导 css。并且由于 bootstrap css 的存在，复选框内的刻度线尺寸减小了。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<?php 
$categories = Array
(
        [
            'id' => 3,
            'category_name' => 'Category 3',
            'parent_id' => '',
            'child_categories' => Array
                (
                ),

           'amenities' =>[
                            [
                                'id' => 3,
                                'amenity_name' => 'Amenity 3',
                                'category_id' => 3
                            ],
                            [
                               'id' => 18,
                                'amenity_name' => 'Amenity 18',
                                'category_id' => 3
                            ],
                            [
                                'id' => 18,
                                'amenity_name' => 'Amenity 18',
                                'category_id' => 3
                            ],
                            [
                                'id' => 20,
                                'amenity_name' => 'Amenity 20',
                                'category_id' => 3
                            ],
                            [
                                'id' => 22,
                                'amenity_name' => 'Amenity 22',
                                'category_id' => 3
                            ]
                        ]

        ],
        [
            'id' => 4,
            'category_name' => 'Category 4',
            'parent_id' => '',
            'child_categories' => Array
                (
                ),

            'amenities'=> [
                                [
                                    'id' => 4,
                                    'amenity_name' => 'Amenity 4',
                                    'category_id' => 4
                                ],
                                [
                                    'id' => 16,
                                    'amenity_name' => 'Amenity 16',
                                    'category_id' => 4
                                ],
                                [
                                    'id' => 40,
                                    'amenity_name' => 'Amenity 40',
                                    'category_id' => 4
                                ]
                            ]
        ]
)

?>

<style>
    /* TreeJS styling */

.treeview, .treeview ul {
    list-style-type: none;
    overflow: hidden;
}

.treeview li {
    /*text-indent: 1%;*/
    margin-top:0.2em;
    padding:0.15em 0 0.5em 1.5em;
    /*line-height: 22px;*/
    background-repeat:no-repeat;
    background-size: 24px 24px;
}

.treeview li.contains-items {
    background-image: url('icons/arrow-left.png');
} 

.treeview li.items-expanded {
    background-image: url('icons/arrow-down.png');
}

.treeview>li:hover {
    cursor: pointer;
    background-size: 24px 24px;
}

.treeview span.has-node-icon {
    text-indent: 2%;
    margin-top:0.2em;
    padding:0.15em 0 0.5em 2.0em;
    line-height: 22px;
    background-repeat:no-repeat;
    background-size: 24px 24px;
}

.treeview span:not(span.has-node-icon):hover{
    background-color: rgba(246, 246, 246, 0.7);
}

.jqueryTreeview input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: #fff;
  height: 16px;
  width: 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.jqueryTreeview input[type="checkbox"]:checked {
  background: #fff;
}

.jqueryTreeview input[type="checkbox"].affordable_checkbox:checked {
  background: #fff729;
}

.jqueryTreeview input[type="checkbox"]:hover {
  filter: brightness(95%);
}

.jqueryTreeview input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.jqueryTreeview input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

.jqueryTreeview input[type="checkbox"]:checked:after {
  display: block;
}

.jqueryTreeview input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}

</style>

<div class="jqueryTreeview">
    <div class="checkbox">
        <input id="all" type="checkbox" value="-1" checked name="categories[]">
        <label for="all">
            All
        </label>
    </div>
    <ul class="treeview" >

        <?php foreach($categories as $pk => $pv) { 
            // echo '<pre>';
            // print_r($pv);
            // echo '</pre>';
            // exit();
            ?>
                <li>
                    <div class="checkbox">
                        <input id="<?php echo $pv['id']; ?>" type="checkbox" value="<?php echo $pv['id']; ?>" checked name="categories[]">
                        <label for="<?php echo $pv['id']; ?>">
                        <?php echo $pv['category_name']; ?>
                        </label>
                    </div>
                    <?php if(count($pv['amenities'])>0) { ?>
                        <ul class="branch">
                        <?php foreach($pv['amenities'] as $ak => $av) { ?>
                                <li>
                                    <div class="checkbox">
                                        <input id="<?php echo $av['id']; ?>" type="checkbox" checked value="<?php echo $av['id']; ?>" name="amenities[]">
                                        <input id="<?php echo $av['id'].'_2'; ?>" class="affordable_checkbox" type="checkbox" checked value="<?php echo $av['id'].'_2'; ?>" name="amenities[]">
                                        <label for="<?php echo $av['id']; ?>">
                                            <?php echo $av['amenity_name']; ?>
                                        </label>
                                    </div>
                                </li>
                           <?php } ?>
                        </ul>
                    <?php } ?>

                </li>
        <?php } ?>

    </ul>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>

    (function ($){
    // doesn't work without jquery
    if (!$) return;
    // treeView
    function treeView($me) {
        // add treeview class name if not present
        $me.addClass('treeview');
        // collapsable elements i.e. the li with a ul in it
        var $collapse = $me.find('li>ul').parent();
        // generate tree from data
        function generateTree(data, $root, useSpan, imgList) {
            // create a node from a node object
            function createNode(nObj, $target) {
                var li = $('<li>').appendTo($target);
                // node icons require using a span element
                useSpan = useSpan || imgList.length > 0;
                if (useSpan) {
                    li.append($('<span>').text(nObj.label));
                } else {
                    li.text(nObj.label);
                }
                if(imgList.length > 0){
                    // the image
                    var image = 'url('+imgList[nObj.imageIndex]+')';
                    // requires using span
                    var $span = li.find('span');
                    // indicates that it has a node image
                    $span.addClass('has-node-icon');
                    $span.css('background-image', image);
                }
                if (nObj.children != undefined && nObj.children.length > 0) {
                    var innerList = $('<ul>').appendTo(li);
                    for (var i = 0; i < nObj.children.length; i++) {
                        var child = nObj.children[i];
                        createNode(child, innerList);
                    };
                }

                return li;
            }
            for (var i = 0; i < data.length; i++) {
                createNode(data[i], $root);
            }
        }

        return {
            //initialize control
            init: function (data) {
                // handle undefined error
                data = data || { };

                // default optoins
                var defaults = {
                    model: null, // treeview data model
                    useSpan: false, // use <span> to build model
                    imageList: [], // add icons to nodes
                    // ajax: null, TODO: load data using ajax
                    expanded: false // the tree is expanded
                };
                // configuration
                var options = { };

                if (typeof data.concat != 'undefined') {
                    // concat is an array method, thus checks if data is array
                    // typeof array returns object otherwise
                    defaults.model = data;
                    // data has model only, which is transferred to defaults.model
                    // prevents wrong merge in $.extend
                    data = null;
                }
                // merge options
                options = $.extend(defaults, data);

                if (options.model != null) {
                    // generate the tree
                    generateTree(options.model, $me, options.useSpan, options.imageList);
                    // re assign var value for new dom structure
                    $collapse = $me.find('li>ul').parent();
                }
                // all the collapsable items which have something
                $collapse.addClass('contains-items');
                // user config
                if (options.expanded){
                    $collapse.addClass('items-expanded')
                } else {
                    $me.find('ul').css('display', 'none');
                }
                // expand items which have something
                $me.find('.contains-items').on('click', function (event) {
                    if ($(event.target).hasClass('contains-items')){
                        // expand icon
                        $(this).toggleClass('items-expanded');
                        // the inner list
                        var $a = $(this).find('>ul');
                        // slide effect
                        $a.slideToggle();
                        // stop propagation of inner elements
                        event.stopPropagation();
                    }
                });
            },
            // expand all items
            expandAll: function() {
                var items = $me.find('.contains-items');
                items.find('ul').slideDown();
                items.addClass('items-expanded');
            },
            // collapse all items
            collapseAll: function() {
                var items = $me.find('.contains-items');
                items.find('ul').slideUp();
                items.removeClass('items-expanded');
            }
        }
    }
    // treeView jQuery plugin
    $.fn.treeView = function(options) {
        // if it's a function arguments
        var args = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : undefined;
        // all the elements by selector
        return this.each(function () {
            var instance = new treeView($(this));
            if ( instance[options] ) {
                // has requested method
                return instance[options](args);
            } else {
                // no method requested, so initialize
                instance.init(options);
            }
        });
    }

})(window.jQuery);

$(function(){
    let $treeView = $('.treeview');
        let $all = $('#all');
        $treeView.treeView();

        $all.change(function(){
            if($(this).is(':checked')){
                $treeView.find('input[type=checkbox]').prop('checked', true);
            }else{
                $treeView.find('input[type=checkbox]:checked').prop('checked', false);
            }
        });

        $treeView.on('change', 'input[type=checkbox]', function() {

            if(this.checked){
                // check all children
                var lenchk = $(this).closest('ul').find(':checkbox');
                var lenchkChecked = $(this).closest('ul').find(':checkbox:checked');

                //if all siblings are checked, check its parent checkbox
                if (lenchk.length == lenchkChecked.length) {
                    $(this).closest('ul').siblings().find(':checkbox').prop('checked', true);
                }else{
                    $(this).closest('.checkbox').siblings().find(':checkbox').prop('checked', true);
                }
            } else {
                // uncheck all children
                $(this).closest('.checkbox').siblings().find(':checkbox').prop('checked', false);
                $(this).closest('ul').siblings().find(':checkbox').prop('checked', false);
            }

            var all_checkboxes = $('.treeview input[type="checkbox"]');

            if (all_checkboxes.length === all_checkboxes.filter(":checked").length) {
                $all.prop('checked', true);
            }else{
                $all.prop('checked', false);
            }

        });
})
</script>

您可以通过复制和粘贴来测试代码。不包括 bootstrap css，它可以正常工作，并且使用 bootstrap，大小会减小。

我尝试在每个输入上添加类 jqueryTreeview，但它的 css 仍然被引导 css 覆盖。

Answer 1

我已经测试了你的代码，这是因为 box-sizing: border-box; 继承自 bootstrap CSS。您只需要覆盖此属性。为此，您需要添加

.jqueryTreeview input[type="checkbox"]:after {
  /*other property*/
  box-sizing: content-box; //added line
}

这应该可以解决您的问题。