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准备好样式风格所需的图片：

cab78b8dae528a63d76850ba5d0344dd.png

此时我们在给他写上样式：

/*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所示的效果：

207dd1868a6f9ada541eeb321401e06a.png

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所展示的一样：

207dd1868a6f9ada541eeb321401e06a.png

这样几步下来就完成了所需的checkbox和radio的美化，大家可以根据自己的需求更换背景图片或者说写一个更适合自己的脚本，如果你还重来都没有这样做过的话，或者说你在js和jquery方面没有任何基础，你也可以直接copy上面的代码，只是更改相应的样式就能完成相同的功能了。心动不如行动吧，动手试试。希望能给大家带来一点帮助。

如需转载烦请注明出处：W3CPLUS

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/358548.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

BZOJ 3436: 小K的农场( 差分约束 )

BZOJ 3436: 小K的农场( 差分约束 )

orz云神...真的给跪了...BFS版spfa T 掉了...然后DFS版的就A了...我现在很迷茫....这就是个普通的差分约束... ------------------------------------------------------------------------------#include<cstdio>#include<cstring>#include<algorithm>#incl…
阅读更多...
教你玩转CSS Float（浮动）

教你玩转CSS Float（浮动）

目录 什么是 CSS Float（浮动）？ 元素怎样浮动 彼此相邻的浮动元素 清除浮动 - 使用 clear CSS 中所有的浮动属性 什么是 CSS Float（浮动）？ CSS 的 Float（浮动），会使元素向左或向右移动
阅读更多...
CORS同源策略

CORS同源策略

同源策略 什么是同源策略&#xff08;Same Origin Policy&#xff09;&#xff1f;什么是跨域?什么是域名? 什么是同源策略&#xff08;Same Origin Policy&#xff09;&#xff1f; 所谓同源策略&#xff0c;所谓同源是指&#xff0c;域名&#xff0c;协议&#xff0c;端口…
阅读更多...
把html文件变成php,怎么把动态的php文件转换成静态的html文件，html文件是php文件…...

把html文件变成php,怎么把动态的php文件转换成静态的html文件，html文件是php文件…...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼生成静态文件除了2楼所说的ob缓存方法之外&#xff0c;还有一种方法就是通过使用模板替换技术实现(正则表达式)header("content-type:text/html;charsetutf-8");//处理添加、修改、删除请求//1.接收一下oper$oper$_REQUE…
阅读更多...
[转]hadoop新手错误解决方法

[转]hadoop新手错误解决方法

解决Exception: org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z 等一系列问题&#xff0c;ljavalangstring 一&#xff0e;简介 Windows下的 Eclipse上调试Hadoop2代码&#xff0c;所以我们在windows下的Eclipse配置hadoop-eclipse-plugin-2.6…
阅读更多...
教你玩转CSS 居中

教你玩转CSS 居中

目录 元素居中对齐 文本居中对齐 图片居中对齐 左右对齐 - 使用定位方式 左右对齐 - 使用 float 方式 垂直居中对齐 - 使用 padding
阅读更多...
JSFinder—从js文件中寻找敏感接口和子域名

JSFinder—从js文件中寻找敏感接口和子域名

说在前面 在渗透测试及漏洞挖掘过程中&#xff0c;信息搜集是一个非常重要的步骤。而在网站的JS文件中&#xff0c;会存在各种对测试有帮助的内容。 比如&#xff1a;敏感接口&#xff0c;子域名等。 社区内的文章也有有些关于JS文件提取信息的片段&#xff0c;比如Brupsuit…
阅读更多...
spring 测试 事务_Spring陷阱：事务测试被认为是有害的

spring 测试 事务_Spring陷阱：事务测试被认为是有害的

spring 测试 事务Spring杀手级功能之一是容器内集成测试 。 尽管EJB多年来一直缺乏此功能&#xff08;Java EE 6终于解决了这个问题&#xff0c;但是我尚未进行测试&#xff09;&#xff0c;但是Spring从一开始就允许您从Web层开始&#xff0c;通过所有服务来测试整个堆栈。到数…
阅读更多...
HTML页面加载和解析流程详细介绍

HTML页面加载和解析流程详细介绍

浏览器加载和渲染html的顺序1. IE下载的顺序是从上到下&#xff0c;渲染的顺序也是从上到下&#xff0c;下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时&#xff0c;其上面的所有部分都已经下载完成&#xff08;并不是说所有相关联的元素都已经下载完&#xff09;。 3.…
阅读更多...
计算机四级必背知识点,2019年6月计算机四级数据库工程师必备考点

计算机四级必背知识点,2019年6月计算机四级数据库工程师必备考点

【导语】2019年6月计算机四级考试备考正在进行中&#xff0c;为了方便考生及时有效的备考&#xff0c;那么&#xff0c;无忧考网为您精心整理了2019年6月计算机四级数据库工程师必备考点&#xff0c;希望对您备考有帮助。如想获取更多计算机等级考试的模拟题及备考资料&#xf…
阅读更多...
教你玩转CSS 组合选择符

教你玩转CSS 组合选择符

目录 后代选择器 子元素选择器 相邻兄弟选择器 后续兄弟选择器 CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔)子元素选择器(以大于号分隔）相邻兄弟选择器（以加号分隔）普通兄弟选择器（以破折号分隔）后代选择器 …
阅读更多...
真香系列-JSFinder实用改造

真香系列-JSFinder实用改造

前言JSFinder是一款优秀的github开源工具&#xff0c;这款工具功能就是查找隐藏在js文件中的api接口和敏感目录&#xff0c;以及一些子域名。 github链接&#xff1a; Code1https://github.com/Threezh1/JSFinder
阅读更多...
远程桌面无法找到计算机不属于指定网络,远程桌面找不到计算机

远程桌面无法找到计算机不属于指定网络,远程桌面找不到计算机

这是我第一次尝试设置一些虚拟机。 我正在尝试rdp给他们&#xff0c;但我遇到了这个错误This is my first attempt in setting up some VMs. I am trying to rdp to them but Im encountering this error**远程桌面无法找到计算机"\[服务器\]"。 这可能意味着"\…
阅读更多...
使用API​​密钥（aka身份验证令牌）部署到Maven Central

使用API​​密钥（aka身份验证令牌）部署到Maven Central

如何在不使用未加密本地密码的情况下与Maven Central / Nexus通信&#xff08;尤其是使用Gradle&#xff0c;但不仅限于此&#xff09;。 基本原理 不幸的是&#xff0c;Gradle&#xff08;和许多其他构建工具&#xff09;没有提供任何机制来本地加密密码&#xff08;或至少编…
阅读更多...
ASP.NET web.config中customErrors节点说明

ASP.NET web.config中customErrors节点说明

customErrors>节点用于定义一些自定义错误信息的信息。此节点有Mode和defaultRedirect两个属性&#xff0c;其中defaultRedirect属性是一个可选属性&#xff0c;表示应用程序发生错误时重定向到的默认URL&#xff0c;如果没有指定该属性则显示一般性错误。Mode属性是一个必选…
阅读更多...
教你玩转CSS 伪类

教你玩转CSS 伪类

目录 语法 anchor伪类 伪类和CSS类 CSS :first-child 伪类 匹配第一个 元素 匹配所有
阅读更多...
docker部署nessus+awvs

docker部署nessus+awvs

镜像使用方法 搜索镜像sudo docker search awvs-nessus 然后没有latest标签的镜像&#xff0c;拉取镜像需要使用sudo docker pull leishianquan/awvs-nessus:v03 下载时间有点长&#xff0c;下载后&#xff0c;查看镜像sudo docker images leishianquan/awvs-nessus:v03 盘…
阅读更多...
如何取消计算机用户名,Win10如何取消登录界面显示用户名?

如何取消计算机用户名,Win10如何取消登录界面显示用户名?

Win10如何取消登录界面显示用户名?求之不得&#xff0c;梦寐思服。得到之后&#xff0c;不过尔尔!不知道您为什么求Win10取消登录界面显示用户名的操作方法&#xff0c;个人感觉&#xff0c;结果很令人不习惯。还不如改成直接登陆系统呢!既然搜索&#xff0c;必然有用&#xf…
阅读更多...
教你玩转CSS 伪元素

教你玩转CSS 伪元素

目录 CSS 伪元素 语法 :first-line 伪元素 :first-letter 伪元素 伪元素和CSS类 多个伪元素 CSS - :before 伪元素
阅读更多...
闰秒对数据库和linux的影响

闰秒对数据库和linux的影响

xiangzhenggui(向正贵) 07-01 17:52:36从日志情况看&#xff0c;这次zookeeper&#xff0c;hadoop出现异常确实与2015年7月1号8&#xff1a;00闰秒有关系xiangzhenggui(向正贵) 07-01 17:59:06DataInputStream.java:370) at org.apache.jute.BinaryInputArchive.readInt(Bin…
阅读更多...
最新文章

Copyright @ 2022~2023