jQuery实现美化版的单选框和复选框 radio 、 checkbox【源码下载】 jquery实现美化版的单选框和复选框

<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8"><title>jQuery实现美化版的单选框和复选框DEMO演示</title><linkrel="stylesheet"href="css/jquery-labelauty.css"><style>ul{list-style-type:none;}li{display:inline-block;}li{margin:10px 0;}input.labelauty + label{font:12px "Microsoft Yahei";}</style></head><body><center><h1>jQuery单选框跟复选框美化代码演示</h1><h3>您的职业(单选框)</h3><ulclass="dowebok"><li><inputtype="radio"name="radio"data-labelauty="视觉设计师"></li><li><inputtype="radio"name="radio"data-labelauty="交互设计师"></li><li><inputtype="radio"name="radio"data-labelauty="前端工程师"></li><li><inputtype="radio"name="radio"data-labelauty="数据分析师"></li><li><inputtype="radio"name="radio"disabled data-labelauty="不可用"></li></ul><hr><h3>您擅长的技能(复选框)</h3><ulclass="dowebok"><li><inputtype="checkbox"name="checkbox"disabled checked data-labelauty="HTML"></li><li><inputtype="checkbox"name="checkbox"data-labelauty="CSS"></li><li><inputtype="checkbox"name="checkbox"data-labelauty="JavaScript"></li><li><inputtype="checkbox"name="checkbox"data-labelauty="SEO"></li><li><inputtype="checkbox"name="checkbox"data-labelauty="PHP"></li><li><inputtype="checkbox"name="checkbox"data-labelauty="JAVA"></li><li><inputtype="checkbox"name="checkbox"data-labelauty=".NET"></li></ul><scriptsrc="js/jquery-1.8.3.min.js"></script><scriptsrc="js/jquery-labelauty.js"></script><script>$(function(){
    $(':input').labelauty();
});</script></center></div></body></html>

源码下载

http://files.cnblogs.com/files/shimily/jquery-pretty-radio-checkbox.rar

jQuery实现美化版的单选框和复选框

本文作者html5tricks,转载请注明出处

之前我们分享过一款CSS3自定义发光radiobox单选框,也在很早的时候分享过一款纯CSS3美化Checkbox和Radiobox按钮。今天这款是利用jQuery实现的美化版单选框和复选框,样式风格非常简洁清爽,是一款很不错的jQuery按钮插件。

在线演示源码下载

jQuery美化单选框radio和复选框checkbox

今天介绍一款jquery美化单选框radio和复选框checkbox插件,主要通过控制背景图片坐标来改变单选框和多选框样式。
分类:表单代码>复选框难易:初级

程序员,你不是一个人;网站开发QQ群:642228541,在线充值,或联系QQ321037704直接充值

查看演示下载资源:46下载资源下载积分:20积分
免责申明

1、本站为用户提供信息存储空间等服务,用户保证对发布的内容享有著作权或已取得合法授权,不会侵犯任何第三方的合法权益。

2、刊载的文章由平台用户所有权归属原作者,不代表同意原文章作者的观点和立场。