带自定义图像的复选框 [英] Checkbox with custom image

问题描述

根据我上一个问题，具有自定义图片的单选按钮，

使用：

之前请求自定义复选框的解决方案。 p>从@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 /> 
  

解决方案

试试

  [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 />  / pre> 

Based on my last question Radio button with custom image,

requesting a solution for custom checkboxes using :before

Solution accepted from @Tambo is as follows. Need customization to be used with checkboxes on the same solution pattern (smart and concise). Thanks.

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 />

解决方案

try this

[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 />

这篇关于带自定义图像的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！