用纯CSS美化radio和checkbox

Radio和checkbox需要美化吗？答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。

先看看纯CSS美化过后的radio和checkbox效果：查看。

项目地址：magic-check

在CSS出现之前，我们美化radio和checkbox需要借助JavaScript，最具代表性的就是icheck，它功能强大复杂并且主题很多。icheck这种美化方案很好很强大，但是也有很多缺点：

太重，需要引入JS、CSS，还有图片或者字体图标，而且还依赖jQuery
扩展性差，Pure js项目还好，如果是Angular.js、React、Vue.js或者Meteor项目，一般都需要自己对icheck做wrapper
样式自定义性不好，修改样式只能重新做图
事件行为跟原生不一致
可维护性差、复杂，谁用谁知道

所以，如果的项目不需兼容古董浏览器的话，用CSS美化radio和checkbox是最好的选择，这样什么都不用依赖，只需CSS，无JS，无图片，无字体图标。

为了更好的在项目中重用，我把美化的代码写成一个项目，叫magic-check，寓意像魔法一样去美化radio和checkbox。

用法非常简单，最好用Bower和npm进行管理，先Install：

bower: ?bower install --save magic-check
npm:? npm install --save magic-check

然后加载CSS文件：

<link rel="stylesheet" href="bower_components/magic-check/css/magic-check.css">

然后，只要给input元素加上一个CSS类magic-checkbox或magic-radio就可以：

Radio

<input class="magic-radio" type="radio" name="radio" id="11">
<label for="11">Normal</label>

Checkbox

<input class="magic-checkbox" type="checkbox" name="layout" id="1">
<label for="1">Normal</label>

原文地址：https://www.cnblogs.com/10manongit/p/12655397.html

时间： 2024-08-10 18:31:10

用纯CSS美化radio和checkbox的相关文章

纯CSS3美化radio和checkbox

如题,主要通过CSS3来实现将radio和checkbox美化的效果.可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试).然后微信端和QQ端訪问也是正常.因为LZ所做的功能正好仅仅须要在微信端展示,所以并未深入研究. </span> 当然,尽管说不能兼容,可是对于为什么不能兼容还是须要解释一下的,其关键在于这么个选择器的问题:input[type=radio]:before.:beofre这个伪类选择器在主流浏览器中能够在P,span,

使用纯CSS自定义美化radio和checkbox

HTML代码如下所示:index.html 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width

纯js模拟 radio和checkbox控件

代码待优化,功能实现了,不兼容ie8以上, 相同name的radio可以实现切换的操作, 分享代码,共同学习进步 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> .radiobox, .checkbox { width: 10px; height: 10px; padding: 2px; borde

纯CSS让radio实现点击显示隐藏效果

—————————————————————————————————————————————————————————————————— ———————————————————————————————————————————————————————————————————— ———————————————————————————————————————————————————————————————————— html <style> #faq input[type='radio']{ displ

纯CSS自定义Html中Checkbox复选框样式

原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观. 要做到这一点需要添加一段代码到你的CSS文件中. /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有

辛星和您一起用纯CSS美化面包屑导航

首先讲一下面包屑导航为什么叫做面包屑导航,它来自于一个童话故事,这个童话故事的名字也非常有特色,叫做"汉塞尔和格莱特",有一天他们去森林里游玩,但是走着走着发现迷路了,大家都知道,森林里都都是数,不管往哪边走,还是茫茫的一片树,于是他们在沿途走过的地方都撒下面包屑,他们利用这些面包屑帮助他们走出了森林,因此,面包屑导航的意思就是说我们去过哪些地方,以及我们如何回到我们之前的位置. 有时候我们特别需要面包屑导航,比如我们在某论坛或者某网上商城闲逛的时候,很容易被茫茫的帖子和众多的商品搞的

纯css修改radio样式

<!DOCTYPE html> <html> <head> <title>radio demo</title> <style> div,ul,li { padding: 0; margin: 0; } li { position: relative; height: 30px; margin-bottom: 10px; } .my-radio { position: relative; z-index: 1; } .my-radio:

用纯css改变默认的radio和checkbox的样式

利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定缺点:兼容性,IE8以下不支持在线例子: input[type="radio"],input[type="checkbox"] { display: none } input[type="radio"]+label::before,input[type="checkbox"]+lab

纯CSS3美化单选按钮radio

这种纯CSS3美化单选按钮radio的方法适用于以下情况: 1.可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉 2.只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出来,但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库 3.不需要JS支持切换效果下图是最终效果图: HTML代码: <label for="man" class="radio"> <span class="radio-bg