自定义 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样式：

.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";

background-color: #f07000;

}

.checkbox01 input[type='checkbox'] {

position: absolute;

clip:rect(0,0,0,0);

}

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样式：

#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;

}