在实际工作中，需要用到表单元素，往往原生的元素在各个浏览器表现不一，并且不能修改，不能满足UI的需求。如下是对checkBox的模拟实现；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css模拟实现checkbox</title>
<style>
html,body,h1,h2,h3,h4,h5,h6,div,ul,ol,li,p,em,iframe,form,b,e,i,dl,dd,dt,header,footer{margin:0; padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{ font:500 normal 12px/1.2 arial;font-family: 'Droid Sans Fallback';margin:0 auto;word-break:break-all; background:#f4f4f4;height: 100%;}
li{ list-style:none;}
a{text-decoration:none;cursor:auto;color:inherit}
h1,h2,h3,h4{font-weight:500;}
select,textarea,input,button{vertical-align:middle;font-family:inherit;font-size:100%;outline:none;}
input,label{ vertical-align:middle;outline:none; }
input:focus,label:focus,a:focus{outline:none}
#myCheckBox{opacity:0; list-style:none;position:relative;}
#formyCheckBox{ width:20px;height:20px; text-align:center; font:bold 20px/100% "宋体"; display:inline-block; border-radius:2radius; -webkit-box-shadow:inset .08em .08em .1em #000; background-color:#fff;color:#096;border:1px solid #e6e6e6;}
</style>
</head>
<body>
<label id="formyCheckBox" for="myCheckBox" οnclick="changeCheckbox()" class="comList_forCheckbox"></label>
<input type="checkbox" id="myCheckBox" class="comList_checkbox"/><span>我接受该协议</span>
<script>
function changeCheckbox() {
var mylabel = document.getElementById('formyCheckBox');
if (mylabel.innerHTML == "√")
mylabel.innerHTML = "";
else
mylabel.innerHTML = "√";
}
</script>
</body>
</html>
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
