自定义 input[type=checkbox] 样式

input[type=checkbox] 复选框作为网页中常见的一种组件， 我们在设计开发过程中，为了页面的美观，往往需要设计符合产品的风格样式；

而原生的复选框样式并不美观，且直接修改它的样式，会发现只可以设置少数的样式，其余样式并没有效果。这时，我们就需要自定义checkbox的个性化样式了。 

我这里简单的介绍两种CSS实现的方式：

两种方式都使用表单元素中的 label 元素和for属性进行关联，这样当鼠标点击 label 时，会自动选中复选框，这对用户体验更友好；

1、 使用伪类来实现自定义checkbox样式

  

html布局：

<p>css3改变checkbox默认样式</p>
<div class="checkbox01">
    <input type="checkbox" id="checkboxLogin" />
    <label for="checkboxLogin">保持登录</label>
</div>

css样式：

/* 第一种解决方案：css3样式改变checkbox默认样式 */
.checkbox01 input[type=checkbox] + label::before {
    content: "\a0";  /* 不换行空格 */
    display: inline-block;
    vertical-align: 2px;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border-radius: 3px;
    background-color: #261c19;
    text-indent: 2px;
    line-height: .65;  /* 行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高 */
}
.checkbox01 input[type="checkbox"]:checked + label::before {
    content: "\2713"; /* 对号的 Unicode 编码 */
    background-color: #f07000; /* 选中的背景颜色 */
}
.checkbox01 input[type='checkbox'] {
    /* 隐藏掉原先实际的 checkbox 框，之所以没用 display:none; 这种简单直接的方式，
       是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除 */
    position: absolute;
    clip:rect(0,0,0,0);       /* 隐藏方式一：裁剪为0 */
    /* visibility: hidden; */ /* 隐藏方式二：隐藏属性 */
}

2、使用图片来替换checkbox的原生样式

 

html布局：

<p>图片代替 checkbox </p>
<div id="check">
    <span>
        <input type="checkbox" class="input_check" id="check1" />
        <label for="check1"></label>
    </span>
    <label for="check1">保持登录</label>
</div>

css样式：

 /* 第二种解决方案：图片代替checkbox */
 #check span { position: relative; }
 #check .input_check {
     position: absolute;
     width: 14px;
     height: 14px;
     visibility: hidden;
}
#check .input_check+label {
     display: inline-block;
     width: 14px;
     height: 14px;
     background: url('./images/checked.png') no-repeat;
     background-position: -31px -3px;
     background-color: #261c19; 
     border-radius: 3px;
}
#check .input_check:checked+label {
    background-position: 0;
}