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…
阅读更多...
CORS同源策略

CORS同源策略

同源策略 什么是同源策略&#xff08;Same Origin Policy&#xff09;&#xff1f;什么是跨域?什么是域名? 什么是同源策略&#xff08;Same Origin Policy&#xff09;&#xff1f; 所谓同源策略&#xff0c;所谓同源是指&#xff0c;域名&#xff0c;协议&#xff0c;端口…
阅读更多...
[转]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…
阅读更多...
JSFinder—从js文件中寻找敏感接口和子域名

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

说在前面 在渗透测试及漏洞挖掘过程中&#xff0c;信息搜集是一个非常重要的步骤。而在网站的JS文件中&#xff0c;会存在各种对测试有帮助的内容。 比如&#xff1a;敏感接口&#xff0c;子域名等。 社区内的文章也有有些关于JS文件提取信息的片段&#xff0c;比如Brupsuit…
阅读更多...
计算机四级必背知识点,2019年6月计算机四级数据库工程师必备考点

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

【导语】2019年6月计算机四级考试备考正在进行中&#xff0c;为了方便考生及时有效的备考&#xff0c;那么&#xff0c;无忧考网为您精心整理了2019年6月计算机四级数据库工程师必备考点&#xff0c;希望对您备考有帮助。如想获取更多计算机等级考试的模拟题及备考资料&#xf…
阅读更多...
使用API​​密钥（aka身份验证令牌）部署到Maven Central

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

如何在不使用未加密本地密码的情况下与Maven Central / Nexus通信&#xff08;尤其是使用Gradle&#xff0c;但不仅限于此&#xff09;。 基本原理 不幸的是&#xff0c;Gradle&#xff08;和许多其他构建工具&#xff09;没有提供任何机制来本地加密密码&#xff08;或至少编…
阅读更多...
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…
阅读更多...
sqlmap （--os-shell）的使用

sqlmap （--os-shell）的使用

文章目录 第一步 搭建存在sql注入的网站第二步 扫描注入点第三步 选择网站的语言第四步 输入网站的绝对路径第五步 查看权限 第一步 搭建存在sql注入的网站 第二步 扫描注入点 python sqlmap.py -u "http://192.168.232.129/cms/show.php?id33" --os-shell第三步…
阅读更多...
FOFA网络空间搜索引擎使用教程

FOFA网络空间搜索引擎使用教程

FOFA网络空间搜索引擎使用教程 FOFA是白帽汇推出的一款网络空间搜索引擎&#xff0c;它通过进行网络空间测绘&#xff0c;能够帮助研究人员或者企业迅速进行网络资产匹配&#xff0c;例如进行漏洞影响范围分析、应用分布统计、应用流行度排名统计等。 官网&#xff1a;https:…
阅读更多...
html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件

html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件

LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件。通过该插件可以为Bootstrap的原生Panel面板增加编辑标题&#xff0c;最大化&#xff0c;最小化&#xff0c;面板拖动关闭面板等功能。使用方法使用该Bootstrap面板功能增强插件需要引入jquery&#xff0c;jque…
阅读更多...
sqlmap --tamper 绕过WAF脚本分类整理

sqlmap --tamper 绕过WAF脚本分类整理

每当注入的时候看到这个贱贱的提示框&#xff0c;内心有千万只草泥马在奔腾。 但很多时候还是得静下来分析过滤系统到底过滤了哪些参数&#xff0c;该如何绕过。 sqlmap中的tamper给我们带来了很多防过滤的脚本&#xff0c;非常实用&#xff0c;可能有的朋友还不知道怎样才能最…
阅读更多...
table 首先冻结_首先记录异常的根本原因

table 首先冻结_首先记录异常的根本原因

table 首先冻结Logback日志库的0.9.30版本带来了一个很棒的新功能&#xff1a;从根&#xff08;最内部&#xff09;异常而不是最外部异常开始记录堆栈跟踪。 当然&#xff0c;我的激动与我贡献了此功能无关。 用塞西尔德米勒&#xff08;Cecil B. de Mille&#xff09; 的话来形…
阅读更多...
Spring Boot框架敏感信息泄露的完整介绍与SRC实战(附专属字典与PoC)

Spring Boot框架敏感信息泄露的完整介绍与SRC实战(附专属字典与PoC)

转载于&#xff1a;https://www.freebuf.com/vuls/289710.html #前言##Spring Boot框架介绍Spring框架功能很强大&#xff0c;但是就算是一个很简单的项目&#xff0c;我们也要配置很多东西。因此就有了Spring Boot框架&#xff0c;它的作用很简单&#xff0c;就是帮我们自动配…
阅读更多...
从外网Thinkphp3日志泄露到杀入内网域控 - 红队攻击之域内靶机渗透实战演练

从外网Thinkphp3日志泄露到杀入内网域控 - 红队攻击之域内靶机渗透实战演练

1.简要描述 这个工具写完有一段时间了&#xff0c;看网上目前还没有一个thinkphp的漏洞集成检测工具&#xff0c;所以打算开源出来。 2.代码结构 插件化思想&#xff0c;所有的检测插件都plugins目录里&#xff0c;TPscan.py主文件负责集中调度。 插件目录: ThinkPHP 用户…
阅读更多...
使用WildFly 9和Jolokia监视DevOps样式

使用WildFly 9和Jolokia监视DevOps样式

DevOps是当今最热门的话题之一。 而且围绕它的主题范围很广&#xff0c;因此很难真正找到完整的描述或涵盖体面粒度的所有内容。 可以肯定的一件事&#xff1a;最重要的部分之一是提供正确的度量标准和信息以监视应用程序。 Java EE和JMX 监视Java EE服务器的标准方法是JMX。 …
阅读更多...
QQ聊天记录恢复、迁移教程（改变默认存储位置、个人文件夹保存位置）

QQ聊天记录恢复、迁移教程（改变默认存储位置、个人文件夹保存位置）

方法一&#xff1a;适用于将原QQ聊天记录存储位置迁移至非系统盘 1、 在想要存储的区域新建文件夹&#xff0c;如&#xff1a; E:\099 Chat Data\Tencent Files\。 2、 打开电脑QQ&#xff0c;设置——文件管理。 3、 点击浏览&#xff0c;选择099 Chat Data下的Tencent Files…
阅读更多...
html type=text/css,type=text/css 有什么用啊 ？

html type=text/css,type=text/css 有什么用啊 ？

用处是告诉浏览器&#xff0c;这段标签内包含的内容是css或text&#xff0c;也就是说如果某种浏览器(特别是wap等手机浏览器械、)不能识别css的&#xff0c;会将代码认为text&#xff0c;从而不显示也不报错。type->类型,这里是style的属性text/css ->文本/css,即css文本…
阅读更多...
记一次应急响应到溯源入侵者

记一次应急响应到溯源入侵者

文本转载于&#xff1a;https://www.freebuf.com/articles/web/289450.html 1. 前言今年的某月某日&#xff0c;系统监测到客户的一企业官网www.******.com遭到了网页篡改&#xff0c;经过人工确认将浏览器的UA替换为百度UA后访问网站&#xff0c;此时网站链接自动跳转至赌博类…
阅读更多...
系统测试集成测试单元测试_单元和集成测试的代码覆盖率

系统测试集成测试单元测试_单元和集成测试的代码覆盖率

系统测试集成测试单元测试我最近在一个宠物项目中着手构建自动化的UI&#xff08;集成&#xff09;测试以及普通的单元测试。 我想将所有这些集成到我的Maven构建中&#xff0c;并提供代码覆盖率报告&#xff0c;以便我可以了解测试覆盖率不足的区域。 我不仅发布了项目的源代码…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023