chrome中的复选框很小且无法点击

Question

由于某种原因，此表单上的复选框不可点击，并且使用谷歌浏览器非常非常小。使用firefox时，复选框效果很好。我不确定要寻找什么......真的很奇怪!!!我使用<form>的方式有问题吗？当我使用检查器时，即使我禁用所有css，复选框仍然很小。不知道发生了什么事。重置浏览器缓存等确实可以使用一些帮助。

HTML： http://pastebin.com/Pt6YgGP7：

CSS： http://pastebin.com/WHap5Vmh

屏幕截图：

    <div class="categories">
    <button class="tyl_category" id="category1">Category1</button>          
    </div>  
    <form name ="things-you-like-form" class="sub-categories" action="things-you-like">

        <div class="control-group">
            <div class="controls category" id="form-category1">
                Select from Category 1
                <input type="checkbox" name="tyl_picked1" value="c1s1">
                <label for "category1-subcategory1">1.1</label>
                <input type="checkbox" name="tyl_picked1" value="c12">
                <label for "category1-subcategory2">1.2</label>
                <input type="checkbox" name="tyl_picked1" value="c1s3">
                <label for "category1-subcategory3">1.3</label>
                <input type="checkbox" name="tyl_picked1" value="c1s4">
                <label for "category1-subcategory4">1.1</label>
            </div>
        </div>
        <!-- end for-each sub-categores -->


    </form>


</div>

JS

<script>
$(document).ready(function() {
    $('form').each(function() { this.reset() });
    var progress = 0;

    $categories = $('.categories');
    $sub_categories = $('.sub-categories');

    $(document).on('click','.tyl_category', function(e) {

        $form = $('#form-'+this.id);
        console.log(this.id);
        $categories.hide('slide', { direction: 'left' }, 250, function() {
            $sub_categories.show();
            $form.show('slide', { direction: 'right' },250);
        });
    });

    $(document).on('click','input[type="checkbox"]', function (e) {
        var $this = $(this);
        var $progress_bar = $('#tyl_progress_bar');
        if ($this.is(':checked')) {
            progress +=1;
        } else {
            progress -=1;
        }
        $progress_bar.text('Step '+progress+'/5');
        $progress_bar.css({width: (progress*25)+"%"});  
        $form = $this.parent('div');
        $form.hide('slide', { direction: 'left' }, 250, function() {
            $sub_categories.show();
            $categories.show('slide', { direction: 'right' },250);
        });


    });

});
</script>

Answer 1

我也有这个问题，不得不设置复选框的高度和宽度：

.make-checkbox-reasonable-height {
    height: 16px;
    width: 16px;
}

<div class="col-sm-2">
    <input asp-for="MyCheckBox" class="form-control input-control make-checkbox-reasonable-height" />
</div>