html尺码选中对勾效果,Js实现表单中的checkbox对勾选中效果

JavaScript实现的checkbox复选框选中效果,表单中的复选框效果,打对勾选中效果模拟,JS与HTML5相结合实现的美化效果。貌似目前比较流行的效果啦!~~

JS实现单个图片选中美化框

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset,

legend, input, button, textarea, blockquote, th, td, p { margin:0; padding:0 }

input, button, select, textarea { outline:none }

li { list-style:none }

img { vertical-align:top; border:none }

textarea { resize:none }

body { width:auto; height:auto; padding:0; margin:0; color: #666; background: #FFF; }

body, input, textarea { font-size:12px; font-family:Arial, Verdana, "Microsoft Yahei", Simsun }

a{cursor:pointer}

a:link{color:#37a;text-decoration:none}

a:visited{color:#669;text-decoration:none}

a:hover{color:#fff;text-decoration:none;background:#37a}

a:active{color:#fff;text-decoration:none;background:#f93}

.clear { clear:both }

.clearfix:after{ content:"."; display:block; font-size: 0; height:0; clear:both; visibility:hidden }

.clearfix{ zoom:1}

#radio_wrap{width: 916px; margin: 50px auto 0;font-size: 0;*word-spacing:-1px;}

@media screen and (-webkit-min-device-pixel-ratio:0){

#radio_wrap{letter-spacing:-4px;}}

#radio_wrap input{display: none;}

#radio_wrap li{position:relative; width: 223px; height: 259px; border: 1px solid #CCC; display:inline-block; *display:inline; *zoom:1; margin:0 2px;}

#radio_wrap li.checked{border:2px solid red;margin:-1px 1px;}

#radio_wrap li.checked i{width:30px; height:30px; position:absolute; right:0; bottom:0;_right:-1px; _bottom:-1px;background:url(/jscss/demoimg/201402/checked.gif) no-repeat;}

(function() {

var radioWrap = document.getElementById("radio_wrap"),

li = radioWrap.getElementsByTagName("li");

for(var i = 0; i < li.length; i++){

li[i].onclick = function() {

for(var i = 0; i < li.length; i++){

li[i].className = "";

}

this.className = "checked";

}

}

})();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值