复选框问题,这种样式的复选框怎么写,求指导

我是打算放个图片,然后checkbox定位上去设置为透明,你们都是怎么做这种的,求哥哥指导一下
clipboard.png

阅读 2.8k
4 个回答

更换了一种可以兼容大多数浏览器的方法

<style>
/*裁剪隐藏原生input*/
.checkbox{ position: absolute;clip: rect(0, 0, 0, 0);}
/*label模拟input*/
label{position:relative; display:inline-block; width: 20px;height: 20px;background: #fff;border: 1px solid #f03e3e;}
/*勾选后更改背景*/
.checkbox:checked + label{background:#f03e3e;}
/*用伪类模拟勾选状态的勾,大小位置可调*/
.checkbox:checked + label:before{content: "";font-family: Muiicons;font-size: 18px;font-weight: 400;color: #fff;text-decoration: none;background: 0 0;border-radius: 0;opacity: 1;border: 2px solid #fff;border-top: none;border-right: none;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-font-smoothing: antialiased;left: 3px;top: 3px;position: absolute;width: 10px;height: 6px;}
</style>
<input type="checkbox" class="checkbox" id="checkbox"/>
<label for="checkbox"></label>

以下方法只兼容chrome,firefox,360等,ie版本不兼容,适用于web端
用伪类,具体样式可以自己调整

<style>
.checkbox{position: relative;display: inline-block;width: 20px;height: 20px;-webkit-appearance: none;-moz-appearance: none;background: #fff;border: 1px solid #f03e3e;outline: 0!important;}
.checkbox:checked{background: #f03e3e; border: 1px solid #f03e3e;}
.checkbox:checked:before{content: "";font-family: Muiicons;font-size: 18px;font-weight: 400;color: #fff;text-decoration: none;background: 0 0;border-radius: 0;opacity: 1;border: 2px solid #fff;border-top: none;border-right: none;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-font-smoothing: antialiased;left: 3px;top: 3px;position: absolute;width: 10px;height: 6px;}
</style>
<input type="checkbox" class="checkbox" />

一般的做法是这样:
<label>
<input type=checkbox>
<span></span>
</label>

样式:
input {display: none}
input+span {未选中样式}
input:checked+span {选中后的样式}

手机打不出反引号,见谅

之前刚好做了一个,我用的不是图标,是自己绘制的,和楼上上的方法一样
效果图是这样,你可以自己修改颜色啥的:

clipboard.png

代码如下,直接复制就可以实现了:

<!doctype html>
<html>
<head>
     <meta charset="utf-8">
     <title>demo</title>
     <style>
     .label{position: relative;}
     .input{display:none}
     .span{display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;}
     .input:checked+.span:after{
         content: "";
         position: absolute;
         width: 9px;
         height: 4px;
         border: 2px solid #fd8845;
         border-top-color: transparent;
         border-right-color: transparent;
         -ms-transform: rotate(-60deg); 
         -moz-transform: rotate(-60deg); 
         -webkit-transform: rotate(-60deg); 
         transform: rotate(-45deg);}
     </style>
</head>
<body>
     <div>
         <label class="label">
             <input class="input" type="checkbox" name="">
             <span class="span"></span>
         </label>
     </div>
</body>
</html>

也可以看看我总结的步骤:
改变checkbox和radio的默认样式

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题