<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery select下拉框样式美化插件</title>
<!--图标样式-->
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--基本样式-->
<link href="css/select-mania.css" rel="stylesheet" type="text/css">
<!--自定义样式-->
<link href="css/themes/select-mania-theme-darkblue.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-green.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-orange.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-red.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-square.css" rel="stylesheet" type="text/css">
<style type="text/css">
.container {
margin: 150px auto;
max-width: 680px;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="container">
<h1>jQuery select-mania 插件示例演示</h1>
<h2>Square+Red Theme</h2>
<select class="demo-1">
<option value="sx">初中数学</option>
<option value="yw">初中语文</option>
<option value="yy">初中英语</option>
<option value="wl">初中物理</option>
</select>
<h2>Darkblue + Large</h2>
<select class="demo-2">
<option value="sx">初中数学</option>
<option value="yw">初中语文</option>
<option value="yy">初中英语</option>
<option value="wl">初中物理</option>
</select>
<h2>Orange + Medium</h2>
<select class="demo-3">
<option value="sx">初中数学</option>
<option value="yw">初中语文</option>
<option value="yy">初中英语</option>
<option value="wl">初中物理</option>
</select>
<h2>Green + No Controls</h2>
<select class="demo-4">
<option value="sx">初中数学</option>
<option value="yw">初中语文</option>
<option value="yy">初中英语</option>
<option value="wl">初中物理</option>
</select>
<h2>带图标的optgroup</h2>
<select class="demo-5">
<optgroup data-icon="fa fa-user" label="Group">
<option value="1" data-icon="fa fa-weixin">微信</option>
<option value="2" data-icon="fa fa-weibo">微博</option>
<option value="4" data-icon="fa fa-qq">QQ</option>
<option value="5" data-icon="fa fa-facebook">Facebook</option>
<option value="6" data-icon="fa fa-github">github</option>
</optgroup>
</select>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/select-mania.js"></script>
<script type="text/javascript">
$('.demo-1').selectMania({
size: 'small',
themes: ['square','red'],
placeholder: 'Please select me!',
removable: true,
search: true,
});
$('.demo-2').selectMania({
size: 'large',
themes: ['darkblue'],
placeholder: 'Please select me!',
removable: true,
search: true
});
$('.demo-3').selectMania({
themes: ['orange'],
placeholder: 'Please select me!',
removable: true,
search: true
});
$('.demo-4').selectMania({
themes: ['green'],
placeholder: 'Please select me!'
});
$('.demo-5').selectMania({
size: 'small',
themes: ['square','blue'],
placeholder: 'Please select me!',
removable: true,
search: true,
});
</script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
jQuery select下拉框样式美化插件.zip （12个子文件） 
js 
jquery-1.11.0.min.js 94KB select-mania.js 56KB css themes select-mania-theme-red.css 999B select-mania-theme-square.css 767B select-mania-theme-orange.css 1017B select-mania-theme-green.css 1011B select-mania-theme-darkblue.css 1KB select-mania.css 16KB
index.html 4KB fonts select-mania-font.eot 2KB select-mania-font.woff 1KB select-mania-font.ttf 2KB资源评论
