Html css如何使此复选框变小

我有一个div，我想在里面放一个客户复选框

这个div是红色的

请检查所附图片。当我将

溢出

设置为自动时，复选框从红色区域中消失

如何使复选框变小

---

请了解如何在HTML中缩小复选框。您在输入上有相同的ID，在标签中对属性有相同的引用，这很可能不起作用。 更新的HTML：

<div ID="campaignDiv" runat="server">
    <ul>
        <li>
            <input type="checkbox" id="1" value="1" />
            <label for="1"></label>
        </li>
        <li>
            <input type="checkbox" id="2" value="1" />
            <label for="2"></label>
        </li>
        <li>
            <input type="checkbox" id="3" value="1" />
            <label for="3"></label>
        </li>
        <li>
            <input type="checkbox" id="4" value="1" />
            <label for="4"></label>
        </li>
    </ul>
</div>

---

您可以将CSS与您的CSS进行比较，以了解代码中所做的更改。

您希望复选框变小，还是希望div覆盖所有内容？@TejasPatel我希望它们变小，并且我还希望div在无法覆盖所有内容时是否有滚动。我希望你抓住了我，我的英语很好poor@TejasPatel我的意思是它们太大了，你有什么想法吗？非常感谢，你能删除jsfille链接吗。谢谢你的理解，删除了那个链接。

#campaignDiv {
    background-color: red;
    padding-bottom: 10px;
    position: absolute;
    top: 40px;    
}
#campaignDiv ul {
    color: #fff;
    list-style: none;    
}
#campaignDiv input[type=checkbox] {
    visibility: hidden;
}
#campaignDiv input[type=checkbox]:checked + label {
    left: 60px;
    background: #26ca28;
}
#campaignDiv li {
    width: 120px;
    background: #333;
    margin: 10px 30px;//Changed
    border-radius: 30px;//Changed
    position: relative;
}
#campaignDiv li:before {
    content:'On';
    position: absolute;
    top: 3px;//Changed
    left: 13px;
    height: 2px;
    color: #26ca28;
    font-size: 12px;//Changed
}
#campaignDiv li:after {
    content:'Off';
    position: absolute;
    top: 4px;//Changed
    left: 84px;
    height: 2px;
    color: #111;
    font-size: 12px;//Changed
}
#campaignDiv li label {
    display: block;
    width: 40px;//Changed
    height: 14px;//Changed
    border-radius: 50px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 4px;//Changed
    z-index: 1;
    left: 12px;
    background: #ddd;
}