jquery美化选择器实例有：边框、下划线、 伸缩 、滑动、 覆盖、 旋转、 弹出层选择 、环形效果。




​​在线预览​​


实例代码


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

​​<body ​​​​class​​​​=​​​​"demo-1"​​​​>​​​​​​​​<div ​​​​class​​​​=​​​​"container"​​​​>​​​​​​​​<header ​​​​class​​​​=​​​​"codrops-header"​​​​>​​​​​​​​<h1> 自定义选择元素</h1>​​​​​​​​<nav ​​​​class​​​​=​​​​"codrops-demos"​​​​>​​​​​​​​<a ​​​​class​​​​=​​​​"current-demo"​​​​href=​​​​"index.html"​​​​>边框</a>​​​​​​​​<a href=​​​​"index2.html"​​​​>下划线</a>​​​​​​​​<a href=​​​​"index3.html"​​​​>伸缩</a>​​​​​​​​<a href=​​​​"index4.html"​​​​>滑动</a>​​​​​​​​<a href=​​​​"index5.html"​​​​>覆盖</a>​​​​​​​​<a href=​​​​"index6.html"​​​​>旋转</a>​​​​​​​​<a href=​​​​"index7.html"​​​​>弹出层选择</a>​​​​​​​​<a href=​​​​"index8.html"​​​​>环形效果</a>​​​​​​​​</nav>​​​​​​​​</header>​​​​​​​​<section>​​​​​​​​<select ​​​​class​​​​=​​​​"cs-select cs-skin-border"​​​​>​​​​​​​​<option value=​​​​""​​​​disabled selected> 联系人方式</option>​​​​​​​​<option value=​​​​"email"​​​​>E-Mail</option>​​​​​​​​<option value=​​​​"twitter"​​​​>Twitter</option>​​​​​​​​<option value=​​​​"linkedin"​​​​>LinkedIn</option>​​​​​​​​</select>​​​​​​​​</section>​​​​​​​​</div><!-- /container -->​​​​​​​​<script src=​​​​"js/classie.js"​​​​></script>​​​​​​​​<script src=​​​​"js/selectFx.js"​​​​></script>​​​​​​​​<script>​​​​​​​​(​​​​function​​​​() {​​​​​​​​[].slice.call(document.querySelectorAll(​​​​'select.cs-select'​​​​)).forEach(​​​​function​​​​(el) {​​​​​​​​new​​​​SelectFx(el);​​​​​​​​});​​​​​​​​})();​​​​​​​​</script>​​​​​​​​</body>​​