改变checkbox的默认样式（兼容）-优快云博客

本文链接：https://blog.youkuaiyun.com/wsymcxy/article/details/88220076

本文介绍了两种改变checkbox默认样式的方案。第一种方法使用CSS3，但可能存在兼容性问题；第二种方法则强调良好的浏览器兼容性。通过HTML结构和SCSS/CSS代码示例进行了解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式1：利用了css3存在兼容性问题

html:

<p class="agree"><input type="checkbox" id="check"><span>&nbsp;&nbsp;我同意以上协议</span></p>

scss:

  .agree {
    line-height: pxTorem(60px);
    margin: pxTorem(50px) 0;
    position: relative;
    span {
      position: absolute;
      left: pxTorem(50px);
      top:pxTorem(15px);
    }
  }
  input[type="checkbox"]{ -webkit-appearance: none;width:20px;height:20px; border-radius: 50%; display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;}
  input[type="checkbox"]::before{content: "";position: absolute;border-radius: 50%;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
  input[type="checkbox"]:checked::before{content: "\2713";border-radius: 50%; background-color: rgb(108,184,89);position: absolute;top: 0;left: 0;width:100%;border: 1px solid  rgb(108,184,89);color: white;font-size: 20px;font-weight: bold;}

方式2：兼容性好

html:

    <p class="agree"><label class="checkBox"><input type="checkbox"><span>&nbsp;&nbsp;我同意以上协议</span></label></p>

scss:

  input[type='checkbox']{
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    outline: none;
    border-radius: 50%;
  }
  .checkBox input[type=checkbox]:checked{
    background: url("../image/select.png")no-repeat center;
  }
  .agree {
    line-height: pxTorem(60px);
    margin: pxTorem(50px) 0;
    position: relative;
    span {
      position: absolute;
      left: pxTorem(50px);
      top:pxTorem(15px);
    }
  }