Replace and improve your HTML fields with style with nothing but Vanilla JavaScript!
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
tail.select
Enabling a dropdown is as easy as 🍦 Vanilla JavaScript -
tail.select(".select");
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.
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