用纯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>
用纯CSS美化radio和checkbox的更多相关文章
- 纯CSS3美化radio和checkbox
如题,主要通过CSS3来实现将radio和checkbox美化的效果.可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试).然后微信端和QQ端訪 ...
- 纯CSS美化的checkbox 和 radio
html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> ...
- 利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...
- 原创:纯CSS美化单复选框(checkbox、radio)
最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...
- CSS 美化radio checkbox
CSS 样式 <style type="text/css"> .option-input { -webkit-appearance: none; -moz-appear ...
- 纯css用图片代替checkbox和radio,无js实现方法
html <ul id="is_offical_post_links"> <li> <label> <input type="c ...
- 美化radio和checkbox样式
HTML部分 <div id="holder"> <div> <div class="tag">Checkbox Small ...
- 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...
- 纯css美化复选框,单选框,滑动条(range)
<div class="box"> <!-- 借鉴地址:http://www.cnblogs.com/xiaoxianweb/p/5465607.html --& ...
随机推荐
- Java:List(一)——概述
说明 在集合类中,List是最基础的一种集合--有序List. List的行为和数组几乎相同:List内部按照放入元素先后顺序存放,每个元素都可以通过索引确定自己的位置,List的索引和数组相同,都是 ...
- Yarn 命令使用
windows下安装方法: 1.下载安装包:直接下载.msi安装文件安装,下载地址 2.使用Chocolatey进行安装:Chocolatey是一个windows下的包管理器,可以通过在命令行下输入以 ...
- LeetCode-033-搜索旋转排序数组
搜索旋转排序数组 题目描述:整数数组 nums 按升序排列,数组中的值 互不相同 . 在传递给函数之前,nums 在预先未知的某个下标 k(0 <= k < nums.length)上进行 ...
- 矩池云上cifar10使用说明
矩池云将 keras 预训练模型保存目录为 /public/keras_pretrained_model/ 使用方法: 先执行命令,创建目录 mkdir -p ~/.keras/models/ 然后将 ...
- laravel报错 : No application encryption key has been specified.
创建了新的laravel项目后, 运行提示:No application encryption key has been specified 解决方法: 这个是由于没有配置好 APP_KEY 在终端上 ...
- Redis pub/sub
list 类型, lpush + rpop 或 lpush + brpop 用作消息队列时,消息只能消费一次,且不支持多个消费者(消息只能消费一次),并且在客户端崩溃时容易丢失消息.而 pub/sub ...
- Django基础八之认证模块---auth
Django基础八之认证模块---auth 目录 Django基础八之认证模块---auth 1. auth介绍 2. autho常用操作 2.1 创建用户 2.2 验证用户 2.3 验证用户是否登录 ...
- OAuth2和JWT - 如何设计安全的API?
JWT和OAuth2比较? 要比较JWT和OAuth2?首先要明白一点就是,这两个根本没有可比性,是两个完全不同的东西. JWT是一种认证协议 JWT提供了一种用于发布接入令牌(Acce ...
- Ubuntu 16.04 更改系统语言为简体中文
镜像下载.域名解析.时间同步请点击阿里巴巴开源镜像站 一.安装时报错 原因:以访客的身份进入的会报错,改为管理员进入即可. ps:有时候往往一点小细节也会造成大问题,但是我们要善于排错. 注:可以看到 ...
- IIS短文件猜解
1.IIS短文件漏洞 Microsoft IIS 短文件/文件夹名称信息泄漏最开始由Vulnerability Research Team(漏洞研究团队)的Soroush Dalili在2010年8月 ...