forked from mikemaccana/styleselect
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (47 loc) · 3.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Full styling for select boxes. No jQuery.</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styleselect.css">
<link rel="stylesheet" href="css/main.css">
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
</head>
<body>
<img src="images/styleselect.png" alt="Style select"/>
<h1>Full styling for select boxes. No jQuery.</h1>
<ul>
<li><strong>Standalone</strong> - runs on its own without any dependencies. If you're using vanilla JS and want to style a select box, you've come to the right place.</li>
<li><strong>Correct</strong> - Triggers 'change' events on real select boxes so you won't have to modify your existing event listeners.</li>
<li><strong>Usable with the keyboard</strong> - Appears in tab index, space shows and hides the options, up and down arrow changes the highlight option, enter selects the currently highlighted option.</li>
<li><strong>Fully styled, and designed to be customised</strong> - There are a number of <a href="http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/">CSS-only ways to style a select box</a>, but these don't style the drop down options, just the current selection - StyleSelect styles everything. StyleSelect is designed for easy incorporation into your own look and feel, uses SCSS, and is free of magic numbers, CSS 'triangles', images, and other hacks. </li>
<li><strong>Accessable</strong> - people using screen readers simply experience the regular, unstyled select box.</li>
</ul>
<p>StyleSelect was made when looking for a modern equivalent of <a href="http://harvesthq.github.io/chosen">Chosen</a> and <a href="http://brianreavis.github.io/selectize.js/">Selectize</a> for a project where jQuery wasn't used.<p>
<h2>Demo</h2>
<p>So we've included `styleselect.scss` in our SASS and loaded the AMD module. To style a select box, just run `styleSelect` with a CSS-style selector:</p>
<code>styleSelect('select.some-class');</code>
<p>That's all. Here's one we just made: </p>
<select>
<option value="value1">Label 1</option>
<option value="value2" selected>Label 2</option>
<option value="value3">Label 3</option>
<option disabled value="value4">Label 4</option>
</select>
<p class="result"></p>
<p>Simple. From here on you'll probably want to open <strong>styleselect.scss</strong> and tweak styling.</p>
<h2>Get StyleSelect</h2>
<h3>npm/browserify users</h3>
<code>npm install styleselect</code>
<h3>AMD/require.js users</h3>
<a class="download" href="https://github.com/mikemaccana/styleselect/archive/master.zip" download="styleselect.zip">Download</a>
<h2>Feature Additions and Pull Requests</h2>
<p>There's a bunch of useful features I'd like in StyleSelect, to please feel free to add them!</p>
<h2>Author and Credits</h2>
<p>Style Select is by <a href="http://twitter.com/mikemaccana">Mike</a>.</p>
<p>Style Select originally began as a fork of <a href="https://github.com/LeslieOA/VisualSelect">VisualSelect</a> - Style Select adds significant bugfixes, entirely new SASS, and docs. The license has also been changed from WTFPL to the MIT license.<p>
<script src="dist/styleselect.js"></script>
<script src="js/main.js"></script>
</body>
</html>