html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式。基本原理就是贱radio和checkbox的自定义样式设置成图片背景,然后通过js或者jQuery给包裹radio和checkbox的label根据点击效果添加和删除类别,从而达到自定义radio和checkbox的假象。
下面直接上代码:
HTML代码
需要如下的HTML代码
Checkbox1
Checkbox2
Radio1
Radio2
Radio3
JavaScript代码
上面的代码是控制css样式的js代码,采用的是jQuery,所以一定要先引入jQuery文件。
CSS代码
最后的CSS代码,如下所示:
* { margin: 0; padding: 0; }
body {
font: 14px/18px 'HelveticaNeue-Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
color: #fff;
background: #333;
}
a:hover,
a:active {
outline: none;
}
/*form style*/
form {
width: 300px;
padding: 18px 20px 0;
margin:20px auto;
background-color: #0064cd;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image: -moz-linear-gradient(#049cdb, #0064cd);
background-image: -ms-linear-gradient(#049cdb, #0064cd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
background-image: -webkit-linear-gradient(#049cdb, #0064cd);
background-image: -o-linear-gradient(#049cdb, #0064cd);
background-image: linear-gradient(#049cdb, #0064cd);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4);
-moz-box-shadow: 0 5px 12px rgba(0,0,0,.4);
-khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4);
box-shadow: 0 5px 12px rgba(0,0,0,.4);
}
fieldset {
border: 0;
padding-bottom: 9px;
}
label {
display: block;
cursor: pointer;
line-height: 20px;
padding-bottom: 9px;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
.checkboxes {
border-bottom: 1px solid #0064cd;
}
.radios {
padding-top: 18px;
border-top: 1px solid #049CDB;
}
.label_check input,
.label_radio input {
margin-right: 5px;
}
.has-js .label_check,
.has-js .label_radio {
padding-left: 34px;
}
.has-js .label_radio,
.has-js .label_check{
background: url(http://www.w3cplus.com/sites/default/files/checkbox-radio-bg.png) no-repeat;
}
.has-js .label_radio {
background-position: 0 0;
}
.has-js .label_check {
background-position: 0 -100px
}
.has-js label.c_on {
background-position: 0 -150px;
}
.has-js label.r_on {
background-position: 0 -50px;
}
.has-js .label_check input,
.has-js .label_radio input { position: absolute; left: -9999px; }
效果图
最终生成的效果图,如下所示:
总结
以上就是使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式的全部代码,代码可以直接拷贝运行,赶紧去试一下吧。
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式相关推荐
- html自定义radio样式,用纯CSS 自定义radio checkbox 样式
以前做自定义样式的radio, checkbox 的时候,一直是如下结构 文字 然后定义diyRadio 的样式作为新Radio, 再用js 做关联. 知道今天才知道可以用标签的for 属性 + :c ...
- 纯CSS设置Checkbox复选框控件的样式
下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要 ...
- 纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化 效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
- html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...
- 纯CSS自定义checkbox对号
最近在做微信小程序,因为这个东西用的是自己的样式,也不支持BOM,所以有些东西用以前做浏览器前端的经验来看不太好弄,必须另辟捷径. 今天在做一个小程序项目,需要自定义checkbox复选框,自 ...
- Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目 配置项 类型 说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...
- CSS自定义checkBox复选框- 对勾样式
有checkBox复选框需求时,我们所用的框架样式不符合,所以需要自己写 对勾样式,当然用图片也OK. 效果图: html: <div class="msg-position c-bg ...
- checkbox多选框,radio单选框
checkbox多选框,radio单选框 一.checkbox多选框 1.语法 2.用法实例 二.radio单选框 1.语法 2.案例 一.checkbox多选框 1.语法 <input nam ...
- checkbox(复选框)和radio(单选按钮)的区别与详解
选中和取消 选中一个 checkbox(复选框) 后,再次点击它,即可取消选中 选中一个 radio(单选按钮) 后,再次点击它,不能取消选中 <!DOCTYPE html> <ht ...
最新文章
- 【 FPGA 】设计一个通用移位寄存器
- VC6.0下opencv1.0的环境配置
- navicat 结构同步会加锁吗_被柜员怠慢的张小波,真的会永久地转走几个亿的结构性存款吗?...
- 如何在windows机器上安装apache ab
- mysql数据库密码为空_注意MySQL 数据库用户root密码为空_MySQL
- Java中instanceof与getClass的区别
- 基础教程之Spin旋转篇
- OVF虚拟镜像的导出方法
- javascript学习-常用内置对象
- PCB之AD常用快捷键
- c语言程序设计教程二进制是什么,C语言程序设计教程
- 编译原理-第一章:引论
- 【软件-ACDSee】图像合并为TIFF
- 计算机ppt密码是什么,PPT怎么设置密码 PPT密码设置教程-电脑教程
- Android7.1 亮度自动调节
- 画论56 恽格《南田画跋》
- 在程序中写一个“HelloJavaWorld你好世界“输出到操作系统文件Hello.txt文件中
- java 字符串文本匹配并高亮显示处理
- win 8 安装
- 快手2020校园招聘秋招笔试--算法B试卷
热门文章
- 增加一列为主键 oracle,给oracle数据库增加一列做主键,增加一个sequence,数据库怎么获得主键。...
- 在线下线html页面,下线
- oracle最大值填充,Oracle sequence值到了最大值的处理
- java定义全局变量_矮油,你知道什么是 Java变量的作用域 嘛?
- java 指定文件格式_java删除指定目录下指定格式文件的方法
- 三星s6 android 5.1.1,谷歌亲儿子们痛哭:三星S6都升级安卓5.1.1了!
- java开发app教程,进阶加薪全靠它!
- 【Network Security!】关于DDOS攻击的现状分析与探索
- Python Numpy介绍
- java ejb3.0_初识EJB3.0 ---配置与运行篇