html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍。因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作。在本站有关于这样制作有好几个教程了,比如说:
我主要是想通过这样的系列教程让大家更好理解和掌握这方面的制作技巧。那么今天在前面的基础上再次增加一篇有关于表单中的checkbox和radio的样式美化教程——美化表单——自定义checkbox和radio样式。
在这个教程中我们主要从两种方法来实现图片代替默认checkbox和radio的样式,第一种是javascript;第二种是jQuery。但不管哪一种,他们的原理都是一样的。将checkbox和radio默认框和选中框制作成图片,并将其集成在同一张图片中。然后通过样式让其成为label的背景图片,并应用不同的类名让它实现选中和未选中的效果。紧接着需要将checkbox和radio的input产生隐藏的假像,最后在通过js或jQuery来给label增加或删除选中和未选中的类名。详细的制作过程如下:
一、HTML Markup
Checkbox1
Checkbox2
Radio1
Radio2
Radio3
写这样的HTML结构是非常容易的,这里有几点需要注意:
把“input[type=checkbox]”和“input[type=radio]”都放在一个“label”内;
所有“input[type=checkbox]”和“input[type=radio]”必须定义一个唯一的类名,而且其对应的“label”的“for”属性值与相对应的“input”的ID类名一致;
同一组的“input[type=radio]”需要具有一个相同的“name”值。
二、CSS Code
在具体实现设计图之前,我们需要给checkbox和radio准备好样式风格所需的图片:
此时我们在给他写上样式:
/*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(images/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;
}
现在你把这些样式写上并不见得你就有效果的,换句话说,上面的样式都写好了,在你的实际项目中并不能看到上图展示的checkbox和radio风格样式,那是为什么呢?因为我们还少了最关键的一步。
三、脚本代码
这一步是我们实现效果的关键一步,我们需要使用javascript或者jquery来实现label上的类名的切换,从而让我们前面所写的样式生效(这也就是前面的样式为什么不生效的原因)。这里我们主要来看两种制作方法的代码:
1、javaScript Code
var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
onload = function() {
var body = gebtn(d,'body')[0];
body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
if (!d.getElementById || !d.createTextNode) {
return;
}
var ls = gebtn(d,'label');
for (var i = 0; i < ls.length; i++) {
var l = ls[i];
if (l.className.indexOf('label_') == -1) {
continue;
}
var inp = gebtn(l,'input')[0];
if (l.className == 'label_check') {
//l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_off' : 'label_check c_on';
l.onclick = check_it;
};
if (l.className == 'label_radio') {
l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
l.onclick = turn_radio;
};
};
};
var check_it = function() {
var inp = gebtn(this,'input')[0];
if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
this.className = 'label_check c_on';
if (safari) {
inp.click();
};
} else {
this.className = 'label_check c_off';
if (safari){
inp.click();
};
};
};
var turn_radio = function() {
var inp = gebtn(this,'input')[0];
if (this.className == 'label_radio r_off' || inp.checked) {
var ls = gebtn(this.parentNode,'label');
for (var i = 0; i < ls.length; i++) {
var l = ls[i];
if (l.className.indexOf('label_radio') == -1) {
continue;
};
l.className = 'label_radio r_off';
};
this.className = 'label_radio r_on';
if (safari){
inp.click();
};
} else {
this.className = 'label_radio r_off';
if (safari) {
inp.click();
};
};
};
只要在你的项目中的“
”中或者“”前的任何位置加上上面的代码,那你就能看到下面DEMO所示的效果:
2、jQuery Code
前面使用的是javascript的方法,接下来我们一起来看使用jQuery的方法实现,在使用jQuery之前大家需要先载入jQuery的版本库:
引入版本库后,接着就是写替换类名的jQuery代码:
function setupLabel(){
if($('.label_check input').length) {
$('.label_check').each(function(){
$(this).removeClass('c_on');
});
$('.label_check input:checked').each(function(){
$(this).parent('label').addClass('c_on');
});
};
if($('.label_radio input').length) {
$('.label_radio').each(function(){
$(this).removeClass('r_on');
});
$('.label_radio input:checked').each(function(){
$(this).parent('label').addClass('r_on');
});
};
}
$(function(){
$('body').addClass('has-js');
$('.label_check,.label_radio').click(function(){
setupLabel();
});
setupLabel();
});
最效果如DEMO所展示的一样:
这样几步下来就完成了所需的checkbox和radio的美化,大家可以根据自己的需求更换背景图片或者说写一个更适合自己的脚本,如果你还重来都没有这样做过的话,或者说你在js和jquery方面没有任何基础,你也可以直接copy上面的代码,只是更改相应的样式就能完成相同的功能了。心动不如行动吧,动手试试。希望能给大家带来一点帮助。
如需转载烦请注明出处:W3CPLUS
html表单复选框样式,美化表单——自定义checkbox和radio样式相关推荐
- php中得到复选框的数据的代码,表单复选框向PHP传输数据的代码
表单复选框向PHP传输数据的代码 表单复选框就是checkbox 1.checkbox的应用 复制代码 代码如下: 2.由于我传输的是在php循环中产生的数组,因此value也要设成变量: for($ ...
- JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮
JS对象迭代 知识点 v-for v-for 循环JS对象,把对象内容循环显示到页面上. <div id="myApp"><h1>JS对象迭代</h1 ...
- Layui表单复选框验证
Layui表单复选框验证 近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提 ...
- 表单复选框提交到mysql_使用表单复选框设置Access数据库表字段
这样做的一种方法是在Access中使用VBA.在Access中访问VBA控制台的方式是,在表单的设计视图中,右键单击复选框控件并选择" Build Event"从菜单中.确保您的控 ...
- 纯CSS美化单复选框(checkbox、radio)
最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...
- HTML中 单复选框的用法
今天看了看单复选框的用法,感觉很是好玩儿 ,所以赶快来把学会的分享下! 首先,在使用表单设计调查问卷时,为了减少用户的操作,使用选择框是一个不错的选择. HTML中有两种选择框,分别为单选框和复选框. ...
- layui复选框怎么取值_layui获取checkbox复选框值
获取layui表单复选框已选中的数据 HTML layui.form.checkbox 获取选中 复选框 开关关 开关开 立即提交 JS layui.use('form', function(){ v ...
- ICheck表单复选框、单选框控件美化插件
作用: 渲染并美化当前页面的复选框或单选框 响应复选框或单选框的点击事件 特点: 在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 支持触摸设备 - iOS.Android ...
- 什么标签用于在表单中构建复选框_基础表单标签及属性
表单标签 一.一个完整的表单包含三个基本组成部分:(表单标签.表单域.表单按钮) 1.表单标签:form标签,用于设置服务器地址.请求方式等等 2.表单域:用户需要填写或选择的数据,输入框.单 ...
最新文章
- Dumpzilla工具第615行bug的解决办法
- C语言函数怎么像python那样返回多个值?(三种方法:1、设置全局变量 2、传递指针 3、使用结构体返回不同类型的数据)
- VC导入导出二维数组到 .txt
- JAVA原生mvc实现用户信息的增删查改
- vnc安装mysql_centos 6.7安装与配置vncserver
- Android安全与逆向之在ubuntu上面搭建NDK环境
- c语言中如何打出草花图案,C语言程序设计程设计题目1.doc
- nginx之虚拟主机与请求的分发
- 序列化:protobuf原理
- Bailian2714 求平均年龄(POJ NOI0105-01)【入门】
- oracle同事查两个表,Oracle查询访问同一表的两个以上索引(三)
- 自定义Java规则 Sonar
- AI旋风少年二三事!C4-AI 大赛项目大赏来啦!
- 英知汇——名词、动词、形容词、副词的形容词,绕不绕?
- 深入浅出程序设计竞赛(基础篇)
- vm linux安装增强功能,VirtualBox虚拟机CentOS安装增强功能Guest Additions(示例代码)
- 正负筛选(neo正向+HSV-tk负向)原理
- 300字美文摘抄加赏析
- 关于工作总结中的感悟
- 记录一下自己爬虎牙LOL主播的爬虫思路
热门文章
- matlab 形态学 颗粒_数字图像处理Matlab-形态学图像处理(附代码)
- LaTeX双栏模板插入通栏公式(跨栏插图)
- nodejs接收表单写入mysql_NodeJS提交表单存数据库(转)
- java的for循环取出数据只是拿到最后一个_新兴大数据分析榆中百合
- java实现迷你计算机,用JAVA写一个迷你编辑器.doc
- 【chromium】 Chromium OS的oom机制
- JavaScript 常用内置对象(字符串属性、Math对象、Array数组对象)
- Python中转换角度为弧度的radians()方法
- ibatis Parameter index out of range (1 number of parameters, which is 0)
- 一步一步学Silverlight 2系列(25):综合实例之Live Search