修改input checkbox和radio默认样式

最近项目中遇到一个复选框功能，由于默认的checkbox样式太丑了，因此需要去掉默认样式，自定义样式去美化。

一、html部分

<div class="item">
    <input type="checkbox" name="" id="checked_1">
    <span></span>
    <label for="checked_1">应用响应速度太慢</label>
  </div>
  <div class="item">
    <input type="checkbox" name="" id="checked_2">
    <span></span>
    <label for="checked_2">整体界面设计不美观</label>
  </div>
  <div class="item">
    <input type="checkbox" name="" id="checked_3">
    <span></span>
    <label for="checked_3">功能不合理未贴近实战业务</label>
  </div>
        

二、css部分

<style>
    .item{
      position: relative;
    }
    .item input[type=checkbox]{
      width: 20px;
      height: 20px;
      opacity: 0;
      position: relative;
      z-index: 2;
    }
    span{
      width: 20px;
      height: 20px;
      background: url(./img/yuan.png) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    label{
      font-size: 16px;
      color: #333;
      line-height: 20px;
      position: absolute;
    }
    .item input[type=checkbox]:checked + span{
      background: url(./img/checked.png) no-repeat;
      background-size: 100% 100%;
    }
  </style>

　　

三、思路

首先，我们需要把checkbox的透明度设置为0： opacity: 0; 然后我们需要用到span，作为checkbox的选中状态显示。接着给span设置一个背景图，作为未选中的样式。通过相邻选择器input[type=checkbox]:checked + span给span设置选中时的背景样式。注意：要设置z-index，input[type=checkbox]要浮在span上面。

最终样式：

 

这次笔记就写到这里啦！谢谢大家(^_^)。