├── .gitignore
├── LICENSE
├── README.md
├── dist
├── demo-icons.svg
├── demo.css
├── demo.html
├── fancyselect.css
├── fancyselect.js
├── fancyselect.min.css
└── fancyselect.min.js
├── gulpfile.babel.js
├── package-lock.json
├── package.json
└── src
├── fancyselect.css
└── fancyselect.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Mohammed Bassit
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # FancySelect
2 |
3 |
4 |
5 | A tiny drop-in replacement for native HTML single select elements written in vanilla ES6.
6 |
7 | [**View demo**](https://mdbassit.github.io/FancySelect/demo.html)
8 |
9 | ## Motivation
10 |
11 | **Why not just style a native select element with CSS?**
12 | Absolutely do that if it's enough for your use case. The main reason I created this project is because I needed a drop down list of icons that didn't suck.
13 |
14 | ## Features
15 |
16 | * Zero dependencies
17 | * Very easy to use
18 | * Customizable
19 | * Icon support
20 | * Fully accessible
21 | * Works on all modern browsers (no IE support)
22 | * No multi-select support (not accessible)
23 |
24 | ## Getting Started
25 |
26 | ### Basic usage
27 |
28 | Download the [latest version](https://github.com/mdbassit/FancySelect/releases/latest), and add the script and style to your page:
29 | ```html
30 |
31 |
32 | ```
33 |
34 | Or include from a CDN (not recommended in production):
35 | ```html
36 |
37 |
38 | ```
39 |
40 | The native select elements will be replaced automatically.
41 |
42 | ### Excluding specific elements
43 |
44 | Once you include FancySelect in your page, it will replace all native select elements with a custom listbox. If you would like to exclude some select elements, simply add the CSS class `fsb-ignore`.
45 |
46 | ```html
47 |
48 |
49 |
54 |
55 |
56 |
57 |
62 | ```
63 |
64 | ### Updating options
65 |
66 | If there is a need to programmatically update a custom listbox's options, you first need to update the native select's options, then call FancySelect.update() with the native select element as an argument.
67 |
68 | ```js
69 | const myselect = document.getElementById('my-select');
70 | const newItems = ['Californium', 'Vibranium', 'Uranium'];
71 |
72 | // Add new options to the native select element
73 | newItems.forEach(item => {
74 | const option = document.createElement('option');
75 | option.textContent = item;
76 | myselect.appendChild(option);
77 | // Please don't add select options to the DOM individually in production. Use a documentFragment.
78 | });
79 |
80 | // Update the custom listbox
81 | FancySelect.update(myselect);
82 | ```
83 |
84 | ### Disabling and enabling
85 |
86 | FancySelect detects the disabled state of a native select automatically and applies it to the custom listbox. If a native select element's disabled state changes after FancySelect's initialization, calling FancySelect.update() will update it.
87 |
88 | ```js
89 | const myselect = document.getElementById('my-select');
90 |
91 | // Disable the native select element
92 | myselect.disabled = true;
93 |
94 | // Update the custom listbox
95 | FancySelect.update(myselect);
96 | ```
97 |
98 | ### Change and input events
99 |
100 | An `input` and a `change` events are triggered on the original native select element whenever a new option is selected on the custom select box.
101 |
102 | ### Customization
103 |
104 | The look and feel of the listbox and the popup button can be customized with CSS variables.
105 |
106 | ```html
107 |
108 |
109 |
114 |
115 |
116 |
138 | ```
139 |
140 | Check out the included demo for more examples.
141 |
142 | ### Icons
143 |
144 | You can add icons to the select options by setting a data-icon attribute to a valid SVG sprite URI.
145 |
146 | ```html
147 |
148 |
153 | ```
154 | The icons can also be defined in the same document.
155 |
156 | ```html
157 |
168 |
169 |
170 |
175 | ```
176 |
177 | **Note:** Currently, only SVG sprites are supported, and that's unlikely to change in the future. [Learn more about SVG sprites](https://css-tricks.com/svg-sprites-use-better-icon-fonts/).
178 |
179 |
180 |
181 | ## Building from source
182 |
183 | Install the development dependencies:
184 | ```bash
185 | npm install
186 | ```
187 |
188 | Run the build script:
189 | ```bash
190 | npm run build
191 | ```
192 | The built version will be in the `dist` directory in both minified and full copies.
193 |
194 | ## Contributing
195 |
196 | If you find a bug or would like to implement a missing feature, please create an issue first before submitting a pull request (PR).
197 |
198 | When submitting a PR, please do not include the changes to the `dist` directory in your commits.
199 |
200 | ## Credit
201 |
202 | While this implementation may be different, most of the specifications were inspired by:
203 |
204 | * [Collapsible Dropdown Listbox Example | WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html)
205 | * [<select> your poison](https://www.24a11y.com/2019/select-your-poison/)
206 | * [<select> your poison part 2: test all the things](https://www.24a11y.com/2019/select-your-poison-part-2/)
207 |
208 | ## License
209 |
210 | Copyright (c) 2021 Momo Bassit.
211 | **FancySelect** is licensed under the [MIT license](https://github.com/mdbassit/FancySelect/blob/main/LICENSE).
212 |
--------------------------------------------------------------------------------
/dist/demo-icons.svg:
--------------------------------------------------------------------------------
1 |
2 |
112 |
--------------------------------------------------------------------------------
/dist/demo.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 150vh;
3 | margin: 30px;
4 | color: #444;
5 | background-color: #eee;
6 | font-family: 'Lato', sans-serif;
7 | font-size: 16px;
8 | }
9 |
10 | h1 {
11 | margin-bottom: 1em;
12 | }
13 |
14 | label {
15 | display: block;
16 | margin-bottom: .5em;
17 | }
18 |
19 | .container {
20 | width: 100%;
21 | max-width: 500px;
22 | margin: 0 auto;
23 | }
24 |
25 | .example {
26 | margin-bottom: 1.5em;
27 | }
28 |
29 | .full-width select,
30 | .full-width .fsb-select {
31 | width: 100%;
32 | }
33 |
34 | .custom-style {
35 | --fsb-border: 0;
36 | --fsb-radius: 2em;
37 | --fsb-color: #fff;
38 | --fsb-background: #2F86A6;
39 | --fsb-padding: .75em 1.5em;
40 | --fsb-arrow-padding: 1.5em;
41 | --fsb-arrow-size: .5em;
42 | --fsb-list-height: 200px;
43 | --fsb-list-radius: .75em;
44 | --fsb-list-background: #34BE82;
45 | --fsb-hover-background: #2FDD92;
46 | }
47 |
48 | .icons {
49 | --fsb-border: 1px solid #fc0;
50 | --fsb-radius: 10px;
51 | --fsb-padding: .75em;
52 | --fsb-arrow-padding: 1em;
53 | --fsb-hover-background: #fc0;
54 | --fsb-list-height: 350px;
55 | }
56 |
57 | @media screen and (min-height: 680px) {
58 | .auto-position {
59 | position: absolute;
60 | width: calc(100% - 60px);
61 | max-width: 500px;
62 | bottom: 20px;
63 | }
64 | }
--------------------------------------------------------------------------------
/dist/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
4 |
5 | A tiny drop-in replacement for native HTML single select elements written in vanilla ES6.
6 |
7 | [**View demo**](https://mdbassit.github.io/FancySelect/demo.html)
8 |
9 | ## Motivation
10 |
11 | **Why not just style a native select element with CSS?**
12 | Absolutely do that if it's enough for your use case. The main reason I created this project is because I needed a drop down list of icons that didn't suck.
13 |
14 | ## Features
15 |
16 | * Zero dependencies
17 | * Very easy to use
18 | * Customizable
19 | * Icon support
20 | * Fully accessible
21 | * Works on all modern browsers (no IE support)
22 | * No multi-select support (not accessible)
23 |
24 | ## Getting Started
25 |
26 | ### Basic usage
27 |
28 | Download the [latest version](https://github.com/mdbassit/FancySelect/releases/latest), and add the script and style to your page:
29 | ```html
30 |
31 |
32 | ```
33 |
34 | Or include from a CDN (not recommended in production):
35 | ```html
36 |
37 |
38 | ```
39 |
40 | The native select elements will be replaced automatically.
41 |
42 | ### Excluding specific elements
43 |
44 | Once you include FancySelect in your page, it will replace all native select elements with a custom listbox. If you would like to exclude some select elements, simply add the CSS class `fsb-ignore`.
45 |
46 | ```html
47 |
48 |
49 |
54 |
55 |
56 |
57 |
62 | ```
63 |
64 | ### Updating options
65 |
66 | If there is a need to programmatically update a custom listbox's options, you first need to update the native select's options, then call FancySelect.update() with the native select element as an argument.
67 |
68 | ```js
69 | const myselect = document.getElementById('my-select');
70 | const newItems = ['Californium', 'Vibranium', 'Uranium'];
71 |
72 | // Add new options to the native select element
73 | newItems.forEach(item => {
74 | const option = document.createElement('option');
75 | option.textContent = item;
76 | myselect.appendChild(option);
77 | // Please don't add select options to the DOM individually in production. Use a documentFragment.
78 | });
79 |
80 | // Update the custom listbox
81 | FancySelect.update(myselect);
82 | ```
83 |
84 | ### Disabling and enabling
85 |
86 | FancySelect detects the disabled state of a native select automatically and applies it to the custom listbox. If a native select element's disabled state changes after FancySelect's initialization, calling FancySelect.update() will update it.
87 |
88 | ```js
89 | const myselect = document.getElementById('my-select');
90 |
91 | // Disable the native select element
92 | myselect.disabled = true;
93 |
94 | // Update the custom listbox
95 | FancySelect.update(myselect);
96 | ```
97 |
98 | ### Change and input events
99 |
100 | An `input` and a `change` events are triggered on the original native select element whenever a new option is selected on the custom select box.
101 |
102 | ### Customization
103 |
104 | The look and feel of the listbox and the popup button can be customized with CSS variables.
105 |
106 | ```html
107 |