问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
菜鸟001
    266793187

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

    htmlcssjavascripthtml5
    阅读 2.8k
    4 个回答
    得票最新
    头像
    Reachel
      2.6k1114
      ✓ 已被采纳

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

      <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" />
      头像
      CarterLi
        1.3k4

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

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

        手机打不出反引号，见谅

        头像
        潘家大少爷
          1k16
          头像
          鹿大大
            616

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

            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的默认样式

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