自定义 input[type=radio] 样式

input[type=radio] 原生的单选框样式和原生的复选框样式是一样的不美观，而通常设计过程中，为了契合产品风格，也会将这些组件样式设计的很漂亮，但是直接修改原生的样式，会发现只可以设置少数的样式，其余样式并没有效果。

因此，我们就需要自定义 radio 的个性化样式 ，来契合产品的漂亮风格了。

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

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

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

html代码：

<p>css3改变 radio 默认样式</p> <div class="checkbox01"> <input type="radio" name="radios" id="checkboxLogin" /> <label for="checkboxLogin">保持登录</label> </div> <div class="checkbox01"> <input type="radio" name="radios" id="checkboxLogin1" /> <label for="checkboxLogin1">取消登录</label> </div>

css样式：

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

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

html代码：

<p>图片代替 radio </p> <div id="check"> <span> <input type="radio" class="input_check" id="check1" name="sex" /> <label for="check1"></label> </span> <label for="check1">保持登录</label> <span> <input type="radio" class="input_check" id="check2" name="sex" /> <label for="check2"></label> </span> <label for="check2">取消登录</label> </div>

css样式：

body { background: #000; color: #fff; } /* 第二种解决方案：图片代替 radio */ #check span { position: relative; } #check .input_check { position: absolute; width: 14px; height: 14px; visibility: hidden; } #check .input_check+label { display: inline-block; width: 11px; height: 11px; background: url('./images/checked.png') no-repeat; background-position: -31px -3px; border: 1px solid #fff; border-radius: 50%; padding: 3px; background-clip: content-box; } #check .input_check:checked+label {background-position: 0;}