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>
|