首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

纯JS打造网页中checkbox和radio的美化效果

Posted in Javascript onOctober 13, 2016

图片素材：

纯JS打造网页中checkbox和radio的美化效果纯JS打造网页中checkbox和radio的美化效果

效果图：

纯JS打造网页中checkbox和radio的美化效果

<head>
<style>
BODY {
FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5%
}
LABEL {
MARGIN-RIGHT: 1.2em
}
.custom-checkbox {
POSITION: relative
}
.custom-radio {
POSITION: relative
}
.custom-checkbox INPUT {
POSITION: absolute; MARGIN: 0px; TOP: 2px; LEFT: 2px
}
.custom-checkbox LABEL {
POSITION: relative; PADDING-BOTTOM: 0.5em; LINE-HEIGHT: 1; MARGIN: 0px 0px 0.3em; PADDING-LEFT: 30px; PADDING-RIGHT: 0px; DISPLAY: block; FONT-SIZE: 1.3em; CURSOR: pointer; PADDING-TOP: 0.5em
}
.custom-checkbox LABEL {
BACKGROUND: url(./checkbox.gif) no-repeat
}
.custom-radio LABEL {
BACKGROUND: url(./radiobutton.gif) no-repeat
}
.custom-checkbox LABEL {
BACKGROUND-POSITION: -10px -14px
}
.custom-radio LABEL {
BACKGROUND-POSITION: -10px -14px
}
.custom-checkbox LABEL.hover {
BACKGROUND-POSITION: -10px -114px
}
.custom-checkbox LABEL.focus {
BACKGROUND-POSITION: -10px -114px
}
.custom-radio LABEL.hover {
BACKGROUND-POSITION: -10px -114px
}
.custom-radio LABEL.focus {
BACKGROUND-POSITION: -10px -114px
}
.custom-checkbox LABEL.checked {
BACKGROUND-POSITION: -10px -214px
}
.custom-radio LABEL.checked {
BACKGROUND-POSITION: -10px -214px
}
.custom-checkbox LABEL.checkedHover {
BACKGROUND-POSITION: -10px -314px
}
.custom-checkbox LABEL.checkedFocus {
BACKGROUND-POSITION: -10px -314px
}
.custom-checkbox LABEL.focus {
OUTLINE-STYLE: dotted; OUTLINE-COLOR: #ccc; OUTLINE-WIDTH: 1px
}
.custom-radio LABEL.focus {
OUTLINE-STYLE: dotted; OUTLINE-COLOR: #ccc; OUTLINE-WIDTH: 1px
}
.custom-radio INPUT {
POSITION: absolute; MARGIN: 0px; TOP: 2px; LEFT: 2px
}
.custom-radio LABEL {
POSITION: relative; PADDING-BOTTOM: 0.5em; LINE-HEIGHT: 1; MARGIN: 0px 0px 0.3em; PADDING-LEFT: 30px; PADDING-RIGHT: 0px; DISPLAY: block; FONT-SIZE: 1.3em; CURSOR: pointer; PADDING-TOP: 0.5em
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="checkbox" name="genre" id="action" value="action" style="margin-left:100pt;"/>
<label for="action">答案一</label>
<input type="checkbox" name="genre" id="comedy" value="comedy" style="margin-left:100pt;" />
<label for="comedy">答案二</label>
<input type="checkbox" name="genre" id="check-3" value="epic" style="margin-left:100pt;"/>
<label for="check-3">答案三</label>
<legend>小小球童是有史以来最伟大的电影，对不对？</legend>
<br>
<input type="radio" name="opinions" id="totally" value="totally" style="margin-left:100pt;"/>
<label for="totally">完全</label>
<input type="radio" name="opinions" id="no-way" value="no-way" style="margin-left:100pt;"/>
<label for="no-way">您一定是在开玩笑</label>
<input type="radio" name="opinions" id="whats-caddyshack" value="whats-caddyshack" style="margin-left:100pt;"/>
<label for="whats-caddyshack">小小球童是什么？</label>
</form>
<script>
function addClass(b,a){RegExp("(\\s|^)"+a+"(\\s|$)").test(b.className)||(b.className+=" "+a)}
function removeClass(b,a){b.className=b.className.replace(RegExp("(\\s|^)"+a+"(\\s|$)")," ")}
var wrapOuter = function(target,target2,html){ 
var wrap = html 
if(Object.prototype.toString.call(html) === "[object String]")
{ 
if(document.createRange)
{ 
var frag = document.createDocumentFragment();
var div = document.createElement("div");
frag.appendChild(div);
div.innerHTML = html;
wrap=frag.firstChild.firstChild;
}else { //IE8
wrap = document.createElement(html); 
} 
} 
target.parentNode.replaceChild(wrap,target); 
wrap.appendChild(target);
wrap.appendChild(target2);
}
var lblArray=[];
var inputArray=[];
var checkBoxs=document.getElementsByTagName("input");
for(var i=0;i<checkBoxs.length;i++)
{
if("INPUT"==checkBoxs[i].tagName)
{
parents=checkBoxs[i].parentNode;//form
if (parents) 
{ 
for(var j=0;j<parents.children.length;j++) 
{
if(parents.children[j]==checkBoxs[i])
{
if(parents.children[j+1])
{
var olabel=parents.children[j+1];
var oinput=parents[i];
lblArray.push(olabel);
inputArray.push(oinput);
//在olabel和oinput外面包一层<div>
wrapOuter(oinput,olabel,'<div class="custom-'+ oinput.getAttribute('type') +'"></div>');
//绑定事件
olabel.onmouseover=function(){
addClass(this,"hover");
}
olabel.onmouseout=function(){
removeClass(this,"hover");
}
olabel.onclick=function(){
for(var i=0;i<lblArray.length;i++)
{ 
if (this==lblArray[i])
{
if(!inputArray[i].checked)
{ 
inputArray[i].checked=false;
addClass(this,"checked");
if(inputArray[i].type=="radio")
{
for(var k=0;k<inputArray.length;k++)
{
if (i!=k) {
inputArray[k].checked=false;
removeClass(lblArray[k],'checked');
}
}
}
}
else
{ 
if(inputArray[i].type=="checkbox")
{ 
removeClass(this,'checked');
inputArray[i].checked=true;
} 
}
break;
}
} //for i end 
} 
}
break;
}
} 
} 
}
}
</script>
</body>
</html>

以上所述是小编给大家介绍的纯JS打造网页中checkbox和radio的美化效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

纯JS打造网页中checkbox和radio的美化效果

- Author -

游子日月长

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
angularjs 中$apply，$digest，$watch详解
Oct 13 #Javascript
jQuery鼠标事件总结
Oct 13 #Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 #Javascript
jQuery中delegate()方法的用法详解
Oct 13 #Javascript
炫酷的js手风琴效果
Oct 13 #Javascript
轻松搞定js表单验证
Oct 13 #Javascript
Seajs是什么及sea.js 由来，特点以及优势
Oct 13 #Javascript
缓存(3) 逻辑架构(1) ipv6(1) 弱口令(1) 锁(1) 策略(1) 连接数(1) 内存(1) 事务(5) 性能优化(3)
You might like
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
用JS实现轮播图效果（二）
2016/06/26 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
Python实现CET查分的方法
2015/03/10 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
python定时执行指定函数的方法
2015/05/27 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
基于python实现从尾到头打印链表
2019/11/02 Python
PyQt5实现简单的计算器
2020/05/30 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
应聘教师推荐信
2013/10/31 职场文书
质量保证书格式模板
2015/02/27 职场文书
团委副书记工作总结
2015/08/14 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Redis+AOP+自定义注解实现限流
2022/06/28 Redis