chrome中的复选框很小且不可点击答案

【问题标题】：checkboxes tiny and unclickable in chromechrome中的复选框很小且不可点击
【发布时间】：2018-04-29 16:35:07
【问题描述】：

由于某种原因，此表单上的复选框无法点击，并且使用 google chrome 时非常非常小。使用 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>

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

【问题讨论】：

jsfiddle.net/At7TA 它似乎工作.. 你也可以发布你的 css 或更多代码吗？
您的表单没有method，但这不应该是这种情况。您忘记了标签中 for 属性后的 = 符号。
@BeNdErR 发生了很多事情，有没有什么特别的事情会导致这种情况？我可以发布更多代码，但有很多，不想让页面膨胀
我们需要查看您的 CSS。阻止你的 CSS 工作。如果它解决了问题，那就是 CSS 问题。
@MatthewA.McFarland 我遇到了同样的问题。你有没有发现问题的根源？

标签： javascript jquery twitter-bootstrap checkbox

【解决方案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>

【讨论】：