游客

标题:[分享]js+css美化radio和checkbox
正文:
先看radio/checkbox效果对比: 下边贴出源码，实现的原理很简单，就是，先隐藏input[type=radio/checkbox]，然后2中状态图片的切换，同时触发值得改变。HTML代码如下： Radio1 Radio2 Radio3 checkbox1 checkbox2 CSS代码如下：label { display: block; cursor: pointer; line-height: 20px; padding-bottom: 9px; text-shadow: 0 -1px 0 rgba(0,0,0,.2);}.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(upload/2013/7/201307111320336660.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;&nbs
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页