带有自定义图像的复选框答案

【问题标题】：Checkbox with custom image带有自定义图像的复选框
【发布时间】：2015-01-17 03:59:26
【问题描述】：

使用:before请求自定义复选框的解决方案

@Tambo 接受的解决方案如下。需要自定义才能与相同解决方案模式（智能和简洁）上的复选框一起使用。谢谢。

CSS

[type=radio]{
    position: relative;
    margin: 40px
}

[type=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked:before{
    background: green
}

HTML

<input type=radio name=radio />
<input type=radio name=radio />
<input type=radio name=radio />

【问题讨论】：

我们不是代码工厂。我们给了你一个提示 - 所以请你自己做！
目的是为希望自定义两者的人提供一站式解决方案，相信我，网络上有很多糟糕的信息，所有 jquery，js 插件等，前 10 个 jQuery 表单插件等经历了所有这些，这两个答案都是干净的，是一个优雅的解决方案，将对搜索者有很大帮助。

标签： html css

【解决方案1】：

试试这个

[type=checkbox]{
    position: relative;
    margin: 40px
}

[type=checkbox]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=checkbox]:checked:before{
    background: green
}

<input type=checkbox name=radio />
<input type=checkbox name=radio />
<input type=checkbox name=radio />

【讨论】：

感谢 user3610227 和 @Tambo