我如何使用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

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

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

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

或者通常更友好的移动设备只是两个按钮并排“是”和“否”。然后，如果你单击一个它就会变为活动状态，就像某种切换按钮一样。