现在前端页面效果日益丰富, 默认的 input 组件样式显然不能满足设计需求. 前段时间开发项目中刚好接触到相关的需求, 在此特地整理下修改 radio,CheckBox 样式的方法.
原理: 大致原理都是使用原生的 checkbox 或 input 标签, 在其后面设置相关联的 label 元素. 给 < input > 元素设置为透明, 然后通过定位让用户看到的是 < label > 元素, 利用 CSS 的原生属性来判断用户的操作, 设置选中后的 label 样式, 即 input[type=checkbox]:checked+label{}
利用 css3 伪元素实现样式修改
html 代码
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
- <p > 您的性别:</p>
- <div class="radio-sex">
- <input type="radio" id="sex1" name="sex">
- <label for="sex1"></label>
- <span > 男 </span>
- </div>
- <div class="radio-sex">
- <input type="radio" id="sex2" name="sex">
- <label for="sex2"></label> 女
- </div>
CSS 样式
- .radio-sex {
- position: relative;
- display: inline-block;
- margin-right: 12px;
- }
- .radio-sex input {
- vertical-align: middle;
- margin-top: -2px;
- margin-bottom: 1px;
- /* 前面三行代码是为了让 radio 单选按钮与文字对齐 */
- width: 20px;
- height: 20px;
- appearance: none;/* 清楚默认样式 */
- -webkit-appearance: none;
- opacity: 0;
- outline: none;
- /* 注意不能设置为 display:none*/
- }
- .radio-sex label {
- position: absolute;
- left: 0;
- top: 0;
- z-index: -1;
- /* 注意层级关系, 如果不把 label 层级设为最低, 会遮挡住 input 而不能单选 */
- width: 20px;
- height: 20px;
- border: 1px solid #3582E9;
- border-radius: 100%;
- }
- .radio-sex input:checked+label {
- background: #3582E9;
- }
- .radio-sex input:checked+label::after {
- content: "";
- position: absolute;
- left: 8px;
- top: 2px;
- width: 5px;
- height: 12px;
- border-right: 1px solid #fff;
- border-bottom: 1px solid #fff;
- transform: rotate(45deg);
- }
优点: 充分借助了 CSS3 的优势, 无需使用 JS 和图片, 仅用纯 CSS3 就可搞定
缺点: 兼容性较差, 仅支持 IE9+
案例:
利用图片实现样式修改
实现思路
1. 设置 input 属性 hidden 对该 input 进行隐藏
<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
2. 借助 label for 标签通过 id 绑定 input , 这样在点击 label 时实际就是点击了 input
- <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
- <label for="adviceRadio1" class="advice"></label>
3. 定义 label 的样式, 设置未选中状态的背景图
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
.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'); }
以上是 radio 单选框的实现代码, checkbox 也是类似 将 input type 定义成 checkbox 即可
利用插件实现
awesome-Bootstrap-checkbox 插件
awesome-Bootstrap-checkbox 是一款可以美化 Bootstrap 复选框和单选按钮的插件. 它使用纯 CSS 编写, 没有任何的 JavaScript 文件. 它通过在原生 Bootstrap 组件的基础上做一些小改动, 即可完成漂亮的美化效果.
插件下载: https://www.bootcdn.cn/awesom...
注: 需要引入 awesome-Bootstrap-checkbox.CSS,font-awesome.CSS 以及 font awesome 对应的字体 font 文件
pretty.CSS
pretty.CSS 是一款纯 css3 漂亮的 checkbox 和 radio 美化效果. pretty.CSS 可以和多种字体图标结合使用, 对原生的 checkbox 和 radio 进行美化, 还可以制作按钮点击时的动画效果.
插件下载: https://www.bootcdn.cn/pretty...
知道的方法先介绍到这里, 大家如有更好的方法欢迎留言讨论.
来源: http://www.jianshu.com/p/ad2f05c7a1b9