HTML Select Fields as beautiful as never before
tail.select
is back: Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
Version 0.5.22
, Vanilla JS
, Plain JS
, ES6
, Modern Browsers, GitHub
tail.select - Beautify Select Fields
Replace and improve your HTML <select>
fields with style with nothing but Vanilla JavaScript!
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
A few notable features:
Beautiful (Multiple) Select Field
Awesome Search function
Move selected Options wherever you want
Over 30 Options & 5 Themes
Extend- and Translatable Environment
Hackable with 3 Callbacks & 3 Events
tail.select is back in plain vanilla JavaScript…
…and still Free/To/Use - MIT Licensed
The tail.select script is back, re-written in vanilla JavaScript and ready to beautify and extend your HTML <select>
fields... again! Add a search bar, multi-selection utilities (such as select all or none buttons), deselectability on single select fields, a perfect design and many more user-friendly functions to your web-application.
tail.select - In the wild
See tail.select
in action on KMProperty.ie .
The search features optgroup
s, search (for really long lists) and quick select (All , None or each optgroup
).
Enabling a dropdown is as easy as 🍦 Vanilla JavaScript -
tail.select(".select");
tail.select on KMProperty.ie
Design: Default
Design: Modern
Color: Light (Octicons)
Color: Light (Feather)
Color: Dark (Octicons)
Color: Dark (Feather)
Color: Light (Octicons)
Color: Light (Feather)
Color: Dark (Octicons)
Color: Dark (Feather)
A beautiful Select Field
The tail.select fields below shows you the absolute standard, without any settings!
Single
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
Multiple
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
HTML Structure
<select class="select" multiple>
<option>[...]</option>
<option>[...]</option>
<option>[...]</option>
</select>
JavaScript Code
tail.select(".select");
A grouped Select Field
It goes on without any setting, but with some more HTML Code to define some optgroup stuff!
Single
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
Multiple
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
HTML Structure
<select class="select" multiple>
<optgroup label="[...]">
<option>[...]</option>
<option>[...]</option>
<option>[...]</option>
</optgroup>
</select>
JavaScript Code
tail.select(".select");
A finding Select Field
Our first line of (JavaScript) code enables the search field within the dropdown element.
Single Search
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
Multiple Search
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
HTML Structure
<select class="select-search" multiple>
<optgroup label="[...]">
<option>[...]</option>
<option>[...]</option>
<option>[...]</option>
</optgroup>
</select>
JavaScript Code
tail.select(".select-search", {
search: true
});
A descriptive Select Field
Just one option and some HTML stuff more and tail.select allows us some descriptive text.
Single Descriptions
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
Multiple Descriptions
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
HTML Structure
<select class="select-descriptions" multiple>
<optgroup label="[...]">
<option>[...]</option>
<option>[...]</option>
<option>[...]</option>
</optgroup>
</select>
JavaScript Code
tail.select(".select-descriptions", {
search: true,
descriptions: true,
});
A limitable Select Field
You can allow to deselect single select fields, and you can limit the selection on multiple ones.
DeSelectable Single
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
Limit Multiple
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
HTML Structure
<select class="select-[...]" multiple>
<optgroup label="[...]">
<option>[...]</option>
<option>[...]</option>
<option>[...]</option>
</optgroup>
</select>
JavaScript Code
tail.select(".select-deselect", {
search: true,
descriptions: true,
deselect: true,
});
tail.select(".select-limit", {
search: true,
descriptions: true,
multiLimit: 10
});
A movable Select Field
It is also possible to move your selections to an existing container elsewhere and hide the respective options within the dropdown field.
Move to an external Container
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
Move to the Label
Atari 2600
Atari 5200
Atari 7800
Atari Panther
Atari Jaguar
Atari Jaguar 2
Atari Flashback
Atari Flashback II
Ataribox
Microsoft XBox
Microsoft XBox 360
Microsoft XBox One
Microsoft Windows 95
Microsoft Windows 98
Microsoft Windows 2000 (ME)
Microsoft Windows XP
Microsoft Windows Vista
Microsoft Windows 7
Microsoft Windows 8(.1)
Microsoft Windows 10
Nintendo Entertainment System
Super Nintendo Entertainment System
Nintendo GameBoy
Nintendo GameBoy Color
Nintendo GameBoy Advanced
Nintendo GameBoy Advanced SP
Nintendo DS
Nintendo DS Lite
Nintendo DSi
Nintendo 3DS (XL)
Nintendo New 2DS / 3DS (XL)
Nintendo 64
Nintendo GameCube
Nintendo Wii
Nintendo WiiU
Nintendo Switch
SEGA SG-1000
SEGA Master System
SEGA Game Gead
SEGA Mega Drive
SEGA Saturn
SEGA Dreamcast
Sony PlayStation One
Sony PlayStation 2
Sony PlayStation 3
Sony PlayStation 4
Sony PlayStation Portable
Sony PlayStation Vita
HTML Structure
<select class="select-[...]" multiple>
<optgroup label="[...]">
<option>[...]</option>
<option>[...]</option>
<option>[...]</option>
</optgroup>
</select>
JavaScript Code
tail.select(".select-deselect", {
search: true,
descriptions: true,
hideSelected: true,
hideDisabled: true,
multiLimit: 15,
multiShowCount: false,
multiContainer: ".tail-move-container"
});
tail.select(".select-limit", {
search: true,
descriptions: true,
hideSelected: true,
hideDisabled: true,
multiLimit: 15,
multiShowCount: false,
multiContainer: true
});
A manipulatable Select Field
A small example to show the power of the tail.select.options class.
Activion
Bethesda
BioWare
CD Project Red
Deep Silver
Ubisoft
A hackable Select Field
The magic of Hooks and Callbacks.
Category #1
Category #2
Category #3
Category #4
Category #5
Category ABC
Category DEF
Category GHI
Category JKL
Category MNO
SEO Specialist
Web Developer
https://getbutterfly.com/
https://getbutterfly.com/author/ciprian/
https://www.4property.com/author/ciprian/
https://www.linkedin.com/in/cipriangb/
Owns: getButterfly
Related posts
With simple select tail.select selects the first option, the placeholder doesn’t show up.
https://jsfiddle.net/gajendraatreferral/q6w72x80/1/
with the example
A manipulatable Select Field
you have taken a select for which placeholder is shown.should I pass any options for this?
See an updated example here – https://jsfiddle.net/getbutterfly/03fz1wvL/
I see, thank you so much.
The only problem is though on the UI it deselects, being part of form field, it submits the first value from the dropdown.
Hi, do you have examle how tu use custom function in SortItems, to get ietems sorted by value.
Thanks
Ideally, you would do this prior to enabling tail.select by using something similar to asort() in PHP.
@Ciprian,
I have a very different scenario, the list I am trying to populate in the tail.select, is more than 10k, for which it becomes very slow to render.
I was wondering is there a way to populate the items on key in, is there a way?
No, there is no way. Even if it was a native dropdown, it would still be overkill. For this feature you should implement AJAX searching or autocomplete.
10k is too much for any control.
I am working on a simpler select feature, but even that wouldn’t work.
Here’s an example:
https://tarekraafat.github.io/autoComplete.js/#/
Or even this one:
https://codepen.io/ciprian/pen/poWvQox?editors=0010
Or:
https://dev.to/stephenafamo/how-to-create-an-autocomplete-input-with-plain-javascript
Or:
https://goodies.pixabay.com/javascript/auto-complete/demo.html
Hope this helps!