Html 复选框背景颜色和样式

我已经读到，由于浏览器设置不同，没有任何好的方式来设置复选框的样式。我知道您应该能够通过将每个复选框包装成Div来更改背景色，但是border和arraow呢

但也许有人有什么建议可以这样设计：

目前我在Firefox中有默认设置：

如果您使用Fontawesome（），您将能够像其他字体一样设置这些元素的样式。 或使用遮罩覆盖

标签{
显示：块；
边框：4px实心#88a；
盒影：1px1p3pRGBA（0,0,0,3）插页；
边界半径：10%；
宽度：1米；
高度：1米；
}
输入{
显示：无；
}
输入：选中+标签{
背景色：rgba（0,255,0,8）；
盒影：0px 0px 2px rgba（0,0,0,1）插入；
}

---

Deddy，您可以使用css code

input+div

为

之后的元素设置样式。如果选中复选框，请尝试样式

输入：选中+div

。如果隐藏输入元素，并用

包围所有元素，则可以轻松设置div元素和其中的其他元素的样式。剩下的取决于你的想象力；）

---

我认为最好的方法是将radio/checkbox包装在span，div（无论什么）中，然后使用带有for属性的标签链接到输入的id

然后使用可见性隐藏输入：隐藏并按照您的意愿设置标签样式。（注意，一个输入可以有多个标签）

可以使用before或after添加复选标记

.styled收音机{
可见性：隐藏；
位置：绝对位置；
z指数：-2；
}
.样式无线电标签{
边框：1px实心#ccc；
高度：15px；
宽度：15px；
位置：相对位置；
}
.样式收音机：选中+.样式收音机标签：之后{
内容：'\2713'；
位置：绝对位置；
左：50%；
最高：50%；
转化：translateY（-50%）translateX（-50%）；
}
标签{
显示：内联块；
垂直对齐：中间对齐；
}

HTML
CSS
JS

我的任务是很好地使用bootstrap。我用FontAwesome作为内容

输入[类型=复选框]{
-moz外观：无；
-webkit外观：无；
-o-外观：无；
大纲：无！重要；
内容：无；
}
输入[类型=复选框]：在{
字体系列：“FontAwesome”；
内容：“\f00c”；
字体大小：13px；
边界半径：4px；
颜色：透明！重要；
背景：#fff；
显示：块；
宽度：17px；
高度：17px；
边框：2px实心#d3d6db；
右边距：7px；
}
输入[类型=复选框]：选中：之前{
背景：#3ea8df；
颜色：rgba（255255,0.85）！重要；
边框：2px实心#3ea8df；
边界半径：4px；
}

漫画
漫画

我没有Firefox，所以这些是默认样式，还是您已经为自己设置了样式（如果有，请显示CSS）？欢迎使用Stack Overflow！虽然这在理论上可以回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。

<label>
    <input type="checkbox">
    <div></div>
</label>