html - 我如何使用 css 和 Bootstrap 自定义我的复选框？

Question

我创建了一个包含许多字段和一个复选框的表单，问题是我试图根据我的表单样式自定义复选框(未成功)。

正如你在图片中看到的，复选框的勾是黑色的，我需要它是绿色的。我怎样才能改变颜色？如何更改复选框的大小？

这是我的 HTML:

        <div id="Cajamitad1">
            <form role="form">
                <div class="checkbox">
                    <label><input type="checkbox" value="" >
                    <a class="FontStyle">Vegano</a>
                    </label>
                </div>
        <       div class="checkbox">
                    <label><input type="checkbox" value="">
                    <a class="FontStyle">Diabetico</a>
                    </label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="">
                    <a class="FontStyle">Celiaco</a>
                    </label>
                </div>
            </form>
        </div>

这是我的 CSS:

#ContForm{
    display: inline;
    box-sizing: border-box;
}
.checkbox{
    margin: 10px;
    padding: 10px;
}

.checkbox input[type="checkbox"]{
    margin-left: 5px;
}
#Cajamitad1{

    margin-top: 10px;
    width: 40%;
    float: left;
    padding-left: 200px;
}

Answer 1

如果我错了请纠正我，但据我所知这是不可能的。

这是我的推理:如果您检查 Bootstrap 复选框，那么您会看到该复选框本身是由 <input type="checkbox"> 绘制的你对此的控制非常有限。有些浏览器允许您更改复选框的大小，但不是全部。

所以你唯一能做的就是制作你自己的复选框，例如通过使用两个图像和一些 CSS。

或者通常更适合移动设备的只是两个并排的按钮"is"和“否”。然后，如果您单击其中一个，它就会变为事件状态，就像某种切换按钮一样。