Css实现checkbox及radio样式自定义

前言

checkbox和radio样式自定义在网页中是很常见的， 比如在进行表单输入时性别的选择，用户注册时选择已阅读用户协议。随着用户对产品体验要求越来越高，我们都会对checkbox和radio重新设计，checkbox默认的样式非常丑 ，无法直接修改checkbox和radio的样式，这里我们借助label标签来对它进行样式美化。

先看实现效果图，如下：

实现思路

1.设置input 属性hidden对该input进行隐藏，或者通过display:none也可以

2.借助label for标签通过id绑定input ，这样在点击label时实际就是点击了input

3.定义label的样式，设置未选中状态的背景图

.advice{

height: 12px;

width: 12px;

display: inline-block;

background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');

background-repeat: no-repeat;

background-position: center;

vertical-align: middle;

margin-top: -4px;

}

4.使用相邻选择器设置选中状态label的样式

input[type="radio"]:checked + .advice{

background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');

}

实现代码

请选择反馈的问题：







问题









建议



1


.advice { }

input[type="radio"]:checked + .advice { }

{ }

以上是radio单选框的实现代码，checkbox也是类似 将input type定义成checkbox即可

获取radio及checkbox选中的值

1.获取radio的值

使用jquery获取radio的值有3种方式：

$('input