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