Html 选中时更改复选框背景色

我正在使用css3更改所有复选框的外观，但我正在尝试找到一种更好的方法来实现选中的属性（选中时，复选框必须用纯色填充）我真的不知道使用填充是否是最好的做法，因为我在使用不同的浏览器时会得到不同的结果。一些建议将非常感激

以下是我想要实现的目标：

未选中复选框：

选中复选框：

以下是CSS和HTML：

.checkbox{
边距：0.01米2米；
}
.checkbox.tag{
颜色：#5959；
显示：块；
浮动：左；
字体大小：粗体；
位置：相对位置；
宽度：120px；
}
.复选框标签{
显示：内联；
}
.复选框.输入假设{
显示：无；
}
.输入假设+标签{
-webkit外观：无；
背景色：#fafafa；
边框：1px实心卡；
盒影：0 1px2pxRGBA（0,0,0,0.05），嵌入0px-15px 10px-12px rgba（0,0,0,0.05）；
填充：9px；
显示：内联块；
位置：相对位置；
}
.输入假设：选中+标签：之后{
背景色：#5959；
颜色：#5959；
内容：'\2714'；
字体大小：10px；
左：0px；
填充：2px 8px 2px 2px；
位置：绝对位置；
顶部：0px；
}

秘密的

添加正确的

背景色和
宽度：100%；身高：100%
然后将overflow:hidden添加到父项（
.input assumpt
）并删除复选框标记

请注意，
content:”仍然存在，如果没有它，
：after
或
：before
将不显示


.checkbox{
边距：0.01米2米；
}
.checkbox.tag{
颜色：#5959；
显示：块；
浮动：左；
字体大小：粗体；
位置：相对位置；
宽度：120px；
}
.复选框标签{
显示：内联；
}
.复选框.输入假设{
显示：无；
}
.输入假设+标签{
-webkit外观：无；
背景色：#fafafa；
边框：1px实心卡；
盒影：0 1px2pxRGBA（0,0,0,0.05），嵌入0px-15px 10px-12px rgba（0,0,0,0.05）；
填充：9px；
显示：内联块；
位置：相对位置；
溢出：隐藏；
}
.输入假设：选中+标签：之后{
宽度：100%；
身高：100%；
内容：“；
背景色：#008FD5；
左：0px；
位置：绝对位置；
顶部：0px；
}

秘密的
此处无需填充。只需使用
display:inline块在<代码>上：在<代码>之后，应用<代码>宽度<代码>和<代码>高度<代码>，并应用平滑过渡。您也不需要额外的


.checkbox{
边距：0.01米2米；
}
.checkbox.tag{
颜色：#5959；
显示：块；
浮动：左；
字体大小：粗体；
位置：相对位置；
宽度：120px；
}
.复选框标签{
显示：内联；
}
.复选框.输入假设{
显示：无；
}
.输入假设+标签：之后{
背景色：#fafafa；
边框：1px实心卡；
盒影：0 1px2pxRGBA（0,0,0,0.05），嵌入0px-15px 10px-12px rgba（0,0,0,0.05）；
显示：内联块；
过渡时间：0.3s；
宽度：16px；
高度：16px；
内容：''；
左边距：10px；
}
.输入假设：选中+标签：之后{
背景色：#5959；
}

秘密的
你能提供一个JSFIDLE吗？@jake转换成内联的snippet@Jake使用JSFIDLE编辑。您可以完全摆脱：after。但由于我不知道网站的其余部分是如何构建的，所以我将其留给@Lowtrux编辑不管怎么说，如果按照建议清理的话。没错-我提到它主要是因为OP试图避免使用
填充
。非常感谢@Jake，它工作得很好！只是好奇这个解决方案的交叉问题，比如IE8，我会做我的研究，谢谢大家！伟大的查看caniuse.com了解更多关于不同浏览器实际使用的信息！嘿@Jake我使用connexo解决方案只是因为它符合我网站的结构，但你的回答也是一个完美的解决方案，谢谢你的建议。这是一个伟大的解决方案@connexo，非常感谢。我试图避免填充的东西，所以你的方法派上了用场。