forked from adamcoulombe/jquery.customSelect
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (95 loc) · 3.24 KB
/
index.html
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Style Select Boxes Using jQuery + CSS</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.customSelect.js"></script>
<script type="text/javascript">
$(function(){
$('select.styled').customSelect();
});
</script>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif
}
span.customSelect {
font-size:11px;
background-color: #f5f0de;
color:#7c7c7c;
padding:5px 7px;
border:1px solid #e7dab0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px 5px;
}
span.customSelect.changed {
background-color: #f0dea4;
}
.customSelectInner {
background:url(customSelect-arrow.gif) no-repeat center right;
}
</style>
</head>
<body>
<h1>Custom Select Box CSS Style Plugin: jQuery + CSS</h1>
<p>This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. This concept is based on <a href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/">Ryan Fait's method</a> of styling select boxes, but as a jQuery Plugin.</p>
<h2>Demo:</h2>
<label>Unstyled:</label>
<select>
<option>one</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>
<label>Styled:</label>
<select class="styled">
<option>one</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>
<h3>Notes:</h3>
<p>This technique will not work for browsers IE6 and older, but rather safely and cleanly degrades to default styling for those select boxes.</p>
<h3>Download from github:</h3>
<p><a href="https://github.com/adamcoulombe/jquery.customSelect/raw/master/jquery.customSelect.min.js">Click here to download the production-ready, minified jQuery Plugin </a></p>
<p><a href="https://github.com/adamcoulombe/jquery.customSelect/raw/master/jquery.customSelect.js">Click here to download the uncompressed jQuery Plugin </a></p>
<h3>Usage:</h3>
<table border="0" cellspacing="15" cellpadding="0">
<tr>
<td valign="top"><strong>Javascript: </strong>
<pre>$(document).ready(function(){
$('.mySelectBoxClass').customSelect();
});</pre></td>
<td valign="top"> </td>
<td valign="top"><strong>CSS:</strong>
<pre>
.customSelect {
/* Styles For Your Select Box */
position: relative;
}
<br />
.customSelect.changed {
/* You can use this if you want a different style after user has made a selection */
}
.customSelectFocus {
/* You can use this if you want a different style after user has made a selection */
}
.customSelectOpen {
/* You can use this if you want a different style after user has made a selection */
}
<br />
/* We can style the inner box, too */
.customSelectInner {
background:url(canvas-list-nav-item-arrow.gif) no-repeat center right;
}
</pre></td>
</tr>
</table>
<h3>Fork on github:</h3>
<p> <a href="https://github.com/adamcoulombe/jquery.customSelect">jquery.customSelect on github</a></p>
</body>
</html>