1号店Checkbox复选框美化特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 1号店Checkbox复选框美化特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<title>1号店Checkbox复选框美化</title>
</head>
<body>
<style>
div {margin:0 auto;padding:0 auto}
.checkbox {width:100px;margin-top:200px}
.checkbox label {font:16px/20px 'microsoft yahei',Verdana,Arial;}
</style>

<div class="checkbox">
    <input type="checkbox" id="niminggo" name="niminggo" value="1" /><label for="niminggo">匿名购买</label>
    
 </div>
<script>
  $(function() {
    $( "#niminggo" ).button();
    $( "#format" ).buttonset();
  });
  </script>
</body>
</html>

CSS代码(style.css):

/* nimingcheck */
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{background:url(../images/login.png) no-repeat -346px -265px;border:none;}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{background:url(../images/login.png) no-repeat -346px -295px;border:none;}
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{background:url(../images/login.png) no-repeat -346px -325px;border:none;}

附件:下载该文件资源,减少时间成本(增值服务)