BranchesTags

Repository files navigation

tail.select - Beautify Select Fields

npm Versionnpm DownloadsSupport MeplainJSLicense

Replace and Improve your HTML <select> fields with style and without jQuery!

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.

Wanna see tail.select in action?

Wanna translate tail.select in your language?

Support

You really like my tail.select script and want to support me and all of my projects?
Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee

Features

  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.
    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3

Install & Embed

The master branch will always contain the latest Release, which you can download directly here as .tar or as .zip archive, or just visit the Releases Page on GitHub directly. You can also be cool and using npm, Yarn or bower:

npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN

You can also use the awesome CDN services from jsDelivr or UNPKG.

https://cdn.jsdelivr.net/npm/tail.select@latest/

https://unpkg.com/tail.select/

Thanks To

Translations

Documentation

The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.

Files

The tail.select package contains different JavaScript files:

  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.

Basic Instructions

You can pass up to 2 arguments to the tail.select constructor, the first parameter is required and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or just a single selector as string, which calls the querySelectorAll() method on its own. The second parameter is optional and, if set, MUST be an object with your tail.select options.

<!DOCTYPE html><html><head><metacharset="utf-8" /><linktype="text/css" rel="stylesheet" href="css/tail.select-default.css" /></head><body><scripttype="text/javascript" src="js/tail.select.min.js"></script><!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --><select><option>My Option</option></select><scripttype="text/javascript">document.addEventListener("DOMContentLoaded",function(){tail.select("select",{/* Your Options */});});</script></body></html>

Default options

Please check out GitHubs Wiki Pages to read more about each single option!

tail.select("select",{animate: true,// [0.3.0] BooleanclassNames: null,// [0.2.0] Boolean, String, Array, nullcsvOutput: false,// [0.3.4] BooleancsvSeparator: ",",// [0.3.4] Stringdescriptions: false,// [0.3.0] Booleandeselect: false,// [0.3.0] Booleandisabled: false,// [0.5.0] Booleanheight: 350,// [0.2.0] Integer, nullhideDisabled: false,// [0.3.0] BooleanhideSelected: false,// [0.3.0] Booleanitems: {},// [0.3.0] Objectlocale: "en",// [0.5.0] StringlinguisticRules: {// [0.5.9] Object"е": "ё","a": "ä","o": "ö","u": "ü","ss": "ß"},multiple: false,// [0.2.0] BooleanmultiLimit: Infinity,// [0.3.0] Integer, InfinitymultiPinSelected: false,// [0.5.0] BooleanmultiContainer: false,// [0.3.0] Boolean, StringmultiShowCount: true,// [0.3.0] BooleanmultiShowLimit: false,// [0.5.0] BooleanmultiSelectAll: false,// [0.4.0] BooleanmultiSelectGroup: true,// [0.4.0] BooleanopenAbove: null,// [0.3.0] Boolean, nullplaceholder: null,// [0.2.0] String, nullsearch: false,// [0.3.0] BooleansearchConfig: [// [0.5.13] Array"text","value"],searchFocus: true,// [0.3.0] BooleansearchMarked: true,// [0.3.0] BooleansearchMinLength: 1,// [0.5.13] IntegersearchDisabled: true,// [0.5.5] BooleansortItems: false,// [0.3.0] String, Function, falsesortGroups: false,// [0.3.0] String, Function, falsesourceBind: false,// [0.5.0] BooleansourceHide: true,// [0.5.0] BooleanstartOpen: false,// [0.3.0] BooleanstayOpen: false,// [0.3.0] Booleanwidth: null,// [0.2.0] Integer, String, nullcbComplete: undefined,// [0.5.0] FunctioncbEmpty: undefined,// [0.5.0] FunctioncbLoopItem: undefined,// [0.4.0] FunctioncbLoopGroup: undefined// [0.4.0] Function});

Copyright & License

Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET

About

Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.

github.pytes.net/tail.select/

Resources

Readme
MIT license
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
tail.select - Beautify Select Fields
npm Versionnpm DownloadsSupport MeplainJSLicense
Replace and Improve your HTML <select> fields with style and without jQuery!
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.
Wanna see tail.select in action?
Wanna translate tail.select in your language?
Support

You really like my tail.select script and want to support me and all of my projects?

Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee
Features
  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.

    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3
Install & Embed
The master branch will always contain the latest Release, which you can download directly here
as .tar or as .zip
archive, or just visit the Releases Page
on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/

https://unpkg.com/tail.select/

Thanks To
Translations
Documentation
The Documentation has been moved to GitHubs Wiki Pages,
but I will keep a table of contents list here and some basic instructions.
Files
The tail.select package contains different JavaScript files:
  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.
Basic Instructions
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or
just a single selector as string, which calls the querySelectorAll() method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!DOCTYPE html><html><head><metacharset="utf-8" /><linktype="text/css" rel="stylesheet" href="css/tail.select-default.css" /></head><body><scripttype="text/javascript" src="js/tail.select.min.js"></script><!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --><select><option>My Option</option></select><scripttype="text/javascript">document.addEventListener("DOMContentLoaded",function(){tail.select("select",{/* Your Options */});});</script></body></html>
Default options
Please check out GitHubs Wiki Pages to read more
about each single option!
tail.select("select",{animate: true,// [0.3.0] BooleanclassNames: null,// [0.2.0] Boolean, String, Array, nullcsvOutput: false,// [0.3.4] BooleancsvSeparator: ",",// [0.3.4] Stringdescriptions: false,// [0.3.0] Booleandeselect: false,// [0.3.0] Booleandisabled: false,// [0.5.0] Booleanheight: 350,// [0.2.0] Integer, nullhideDisabled: false,// [0.3.0] BooleanhideSelected: false,// [0.3.0] Booleanitems: {},// [0.3.0] Objectlocale: "en",// [0.5.0] StringlinguisticRules: {// [0.5.9] Object"е": "ё","a": "ä","o": "ö","u": "ü","ss": "ß"},multiple: false,// [0.2.0] BooleanmultiLimit: Infinity,// [0.3.0] Integer, InfinitymultiPinSelected: false,// [0.5.0] BooleanmultiContainer: false,// [0.3.0] Boolean, StringmultiShowCount: true,// [0.3.0] BooleanmultiShowLimit: false,// [0.5.0] BooleanmultiSelectAll: false,// [0.4.0] BooleanmultiSelectGroup: true,// [0.4.0] BooleanopenAbove: null,// [0.3.0] Boolean, nullplaceholder: null,// [0.2.0] String, nullsearch: false,// [0.3.0] BooleansearchConfig: [// [0.5.13] Array"text","value"],searchFocus: true,// [0.3.0] BooleansearchMarked: true,// [0.3.0] BooleansearchMinLength: 1,// [0.5.13] IntegersearchDisabled: true,// [0.5.5] BooleansortItems: false,// [0.3.0] String, Function, falsesortGroups: false,// [0.3.0] String, Function, falsesourceBind: false,// [0.5.0] BooleansourceHide: true,// [0.5.0] BooleanstartOpen: false,// [0.3.0] BooleanstayOpen: false,// [0.3.0] Booleanwidth: null,// [0.2.0] Integer, String, nullcbComplete: undefined,// [0.5.0] FunctioncbEmpty: undefined,// [0.5.0] FunctioncbLoopItem: undefined,// [0.4.0] FunctioncbLoopGroup: undefined// [0.4.0] Function});
Copyright & License
Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET
About
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
github.pytes.net/tail.select/
Resources
Readme
MIT license
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
tail.select - Beautify Select Fields
npm Versionnpm DownloadsSupport MeplainJSLicense
Replace and Improve your HTML <select> fields with style and without jQuery!
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.
Wanna see tail.select in action?
Wanna translate tail.select in your language?
Support

You really like my tail.select script and want to support me and all of my projects?

Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee
Features
  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.

    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3
Install & Embed
The master branch will always contain the latest Release, which you can download directly here
as .tar or as .zip
archive, or just visit the Releases Page
on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/

https://unpkg.com/tail.select/

Thanks To
Translations
Documentation
The Documentation has been moved to GitHubs Wiki Pages,
but I will keep a table of contents list here and some basic instructions.
Files
The tail.select package contains different JavaScript files:
  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.
Basic Instructions
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or
just a single selector as string, which calls the querySelectorAll() method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!DOCTYPE html><html><head><metacharset="utf-8" /><linktype="text/css" rel="stylesheet" href="css/tail.select-default.css" /></head><body><scripttype="text/javascript" src="js/tail.select.min.js"></script><!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --><select><option>My Option</option></select><scripttype="text/javascript">document.addEventListener("DOMContentLoaded",function(){tail.select("select",{/* Your Options */});});</script></body></html>
Default options
Please check out GitHubs Wiki Pages to read more
about each single option!
tail.select("select",{animate: true,// [0.3.0] BooleanclassNames: null,// [0.2.0] Boolean, String, Array, nullcsvOutput: false,// [0.3.4] BooleancsvSeparator: ",",// [0.3.4] Stringdescriptions: false,// [0.3.0] Booleandeselect: false,// [0.3.0] Booleandisabled: false,// [0.5.0] Booleanheight: 350,// [0.2.0] Integer, nullhideDisabled: false,// [0.3.0] BooleanhideSelected: false,// [0.3.0] Booleanitems: {},// [0.3.0] Objectlocale: "en",// [0.5.0] StringlinguisticRules: {// [0.5.9] Object"е": "ё","a": "ä","o": "ö","u": "ü","ss": "ß"},multiple: false,// [0.2.0] BooleanmultiLimit: Infinity,// [0.3.0] Integer, InfinitymultiPinSelected: false,// [0.5.0] BooleanmultiContainer: false,// [0.3.0] Boolean, StringmultiShowCount: true,// [0.3.0] BooleanmultiShowLimit: false,// [0.5.0] BooleanmultiSelectAll: false,// [0.4.0] BooleanmultiSelectGroup: true,// [0.4.0] BooleanopenAbove: null,// [0.3.0] Boolean, nullplaceholder: null,// [0.2.0] String, nullsearch: false,// [0.3.0] BooleansearchConfig: [// [0.5.13] Array"text","value"],searchFocus: true,// [0.3.0] BooleansearchMarked: true,// [0.3.0] BooleansearchMinLength: 1,// [0.5.13] IntegersearchDisabled: true,// [0.5.5] BooleansortItems: false,// [0.3.0] String, Function, falsesortGroups: false,// [0.3.0] String, Function, falsesourceBind: false,// [0.5.0] BooleansourceHide: true,// [0.5.0] BooleanstartOpen: false,// [0.3.0] BooleanstayOpen: false,// [0.3.0] Booleanwidth: null,// [0.2.0] Integer, String, nullcbComplete: undefined,// [0.5.0] FunctioncbEmpty: undefined,// [0.5.0] FunctioncbLoopItem: undefined,// [0.4.0] FunctioncbLoopGroup: undefined// [0.4.0] Function});
Copyright & License
Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET
About
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
github.pytes.net/tail.select/
Resources
Readme
MIT license
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
tail.select - Beautify Select Fields
npm Versionnpm DownloadsSupport MeplainJSLicense
Replace and Improve your HTML <select> fields with style and without jQuery!
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.
Wanna see tail.select in action?
Wanna translate tail.select in your language?
Support

You really like my tail.select script and want to support me and all of my projects?

Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee
Features
  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.

    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3
Install & Embed
The master branch will always contain the latest Release, which you can download directly here
as .tar or as .zip
archive, or just visit the Releases Page
on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/

https://unpkg.com/tail.select/

Thanks To
Translations
Documentation
The Documentation has been moved to GitHubs Wiki Pages,
but I will keep a table of contents list here and some basic instructions.
Files
The tail.select package contains different JavaScript files:
  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.
Basic Instructions
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or
just a single selector as string, which calls the querySelectorAll() method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!DOCTYPE html><html><head><metacharset="utf-8" /><linktype="text/css" rel="stylesheet" href="css/tail.select-default.css" /></head><body><scripttype="text/javascript" src="js/tail.select.min.js"></script><!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --><select><option>My Option</option></select><scripttype="text/javascript">document.addEventListener("DOMContentLoaded",function(){tail.select("select",{/* Your Options */});});</script></body></html>
Default options
Please check out GitHubs Wiki Pages to read more
about each single option!
tail.select("select",{animate: true,// [0.3.0] BooleanclassNames: null,// [0.2.0] Boolean, String, Array, nullcsvOutput: false,// [0.3.4] BooleancsvSeparator: ",",// [0.3.4] Stringdescriptions: false,// [0.3.0] Booleandeselect: false,// [0.3.0] Booleandisabled: false,// [0.5.0] Booleanheight: 350,// [0.2.0] Integer, nullhideDisabled: false,// [0.3.0] BooleanhideSelected: false,// [0.3.0] Booleanitems: {},// [0.3.0] Objectlocale: "en",// [0.5.0] StringlinguisticRules: {// [0.5.9] Object"е": "ё","a": "ä","o": "ö","u": "ü","ss": "ß"},multiple: false,// [0.2.0] BooleanmultiLimit: Infinity,// [0.3.0] Integer, InfinitymultiPinSelected: false,// [0.5.0] BooleanmultiContainer: false,// [0.3.0] Boolean, StringmultiShowCount: true,// [0.3.0] BooleanmultiShowLimit: false,// [0.5.0] BooleanmultiSelectAll: false,// [0.4.0] BooleanmultiSelectGroup: true,// [0.4.0] BooleanopenAbove: null,// [0.3.0] Boolean, nullplaceholder: null,// [0.2.0] String, nullsearch: false,// [0.3.0] BooleansearchConfig: [// [0.5.13] Array"text","value"],searchFocus: true,// [0.3.0] BooleansearchMarked: true,// [0.3.0] BooleansearchMinLength: 1,// [0.5.13] IntegersearchDisabled: true,// [0.5.5] BooleansortItems: false,// [0.3.0] String, Function, falsesortGroups: false,// [0.3.0] String, Function, falsesourceBind: false,// [0.5.0] BooleansourceHide: true,// [0.5.0] BooleanstartOpen: false,// [0.3.0] BooleanstayOpen: false,// [0.3.0] Booleanwidth: null,// [0.2.0] Integer, String, nullcbComplete: undefined,// [0.5.0] FunctioncbEmpty: undefined,// [0.5.0] FunctioncbLoopItem: undefined,// [0.4.0] FunctioncbLoopGroup: undefined// [0.4.0] Function});
Copyright & License
Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET
About
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
github.pytes.net/tail.select/
Resources
Readme
MIT license
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
tail.select - Beautify Select Fields
npm Versionnpm DownloadsSupport MeplainJSLicense
Replace and Improve your HTML <select> fields with style and without jQuery!
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.
Wanna see tail.select in action?
Wanna translate tail.select in your language?
Support

You really like my tail.select script and want to support me and all of my projects?

Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee
Features
  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.

    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3
Install & Embed
The master branch will always contain the latest Release, which you can download directly here
as .tar or as .zip
archive, or just visit the Releases Page
on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/

https://unpkg.com/tail.select/

Thanks To
Translations
Documentation
The Documentation has been moved to GitHubs Wiki Pages,
but I will keep a table of contents list here and some basic instructions.
Files
The tail.select package contains different JavaScript files:
  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.
Basic Instructions
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or
just a single selector as string, which calls the querySelectorAll() method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!DOCTYPE html><html><head><metacharset="utf-8" /><linktype="text/css" rel="stylesheet" href="css/tail.select-default.css" /></head><body><scripttype="text/javascript" src="js/tail.select.min.js"></script><!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --><select><option>My Option</option></select><scripttype="text/javascript">document.addEventListener("DOMContentLoaded",function(){tail.select("select",{/* Your Options */});});</script></body></html>
Default options
Please check out GitHubs Wiki Pages to read more
about each single option!
tail.select("select",{animate: true,// [0.3.0] BooleanclassNames: null,// [0.2.0] Boolean, String, Array, nullcsvOutput: false,// [0.3.4] BooleancsvSeparator: ",",// [0.3.4] Stringdescriptions: false,// [0.3.0] Booleandeselect: false,// [0.3.0] Booleandisabled: false,// [0.5.0] Booleanheight: 350,// [0.2.0] Integer, nullhideDisabled: false,// [0.3.0] BooleanhideSelected: false,// [0.3.0] Booleanitems: {},// [0.3.0] Objectlocale: "en",// [0.5.0] StringlinguisticRules: {// [0.5.9] Object"е": "ё","a": "ä","o": "ö","u": "ü","ss": "ß"},multiple: false,// [0.2.0] BooleanmultiLimit: Infinity,// [0.3.0] Integer, InfinitymultiPinSelected: false,// [0.5.0] BooleanmultiContainer: false,// [0.3.0] Boolean, StringmultiShowCount: true,// [0.3.0] BooleanmultiShowLimit: false,// [0.5.0] BooleanmultiSelectAll: false,// [0.4.0] BooleanmultiSelectGroup: true,// [0.4.0] BooleanopenAbove: null,// [0.3.0] Boolean, nullplaceholder: null,// [0.2.0] String, nullsearch: false,// [0.3.0] BooleansearchConfig: [// [0.5.13] Array"text","value"],searchFocus: true,// [0.3.0] BooleansearchMarked: true,// [0.3.0] BooleansearchMinLength: 1,// [0.5.13] IntegersearchDisabled: true,// [0.5.5] BooleansortItems: false,// [0.3.0] String, Function, falsesortGroups: false,// [0.3.0] String, Function, falsesourceBind: false,// [0.5.0] BooleansourceHide: true,// [0.5.0] BooleanstartOpen: false,// [0.3.0] BooleanstayOpen: false,// [0.3.0] Booleanwidth: null,// [0.2.0] Integer, String, nullcbComplete: undefined,// [0.5.0] FunctioncbEmpty: undefined,// [0.5.0] FunctioncbLoopItem: undefined,// [0.4.0] FunctioncbLoopGroup: undefined// [0.4.0] Function});
Copyright & License
Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET
About
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
github.pytes.net/tail.select/
Resources
Readme
MIT license
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
tail.select - Beautify Select Fields
npm Versionnpm DownloadsSupport MeplainJSLicense
Replace and Improve your HTML <select> fields with style and without jQuery!
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.
Wanna see tail.select in action?
Wanna translate tail.select in your language?
Support

You really like my tail.select script and want to support me and all of my projects?

Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee
Features
  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.

    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3
Install & Embed
The master branch will always contain the latest Release, which you can download directly here
as .tar or as .zip
archive, or just visit the Releases Page
on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/

https://unpkg.com/tail.select/

Thanks To
Translations
Documentation
The Documentation has been moved to GitHubs Wiki Pages,
but I will keep a table of contents list here and some basic instructions.
Files
The tail.select package contains different JavaScript files:
  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.
Basic Instructions
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or
just a single selector as string, which calls the querySelectorAll() method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!DOCTYPE html><html><head><metacharset="utf-8" /><linktype="text/css" rel="stylesheet" href="css/tail.select-default.css" /></head><body><scripttype="text/javascript" src="js/tail.select.min.js"></script><!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --><select><option>My Option</option></select><scripttype="text/javascript">document.addEventListener("DOMContentLoaded",function(){tail.select("select",{/* Your Options */});});</script></body></html>
Default options
Please check out GitHubs Wiki Pages to read more
about each single option!
tail.select("select",{animate: true,// [0.3.0] BooleanclassNames: null,// [0.2.0] Boolean, String, Array, nullcsvOutput: false,// [0.3.4] BooleancsvSeparator: ",",// [0.3.4] Stringdescriptions: false,// [0.3.0] Booleandeselect: false,// [0.3.0] Booleandisabled: false,// [0.5.0] Booleanheight: 350,// [0.2.0] Integer, nullhideDisabled: false,// [0.3.0] BooleanhideSelected: false,// [0.3.0] Booleanitems: {},// [0.3.0] Objectlocale: "en",// [0.5.0] StringlinguisticRules: {// [0.5.9] Object"е": "ё","a": "ä","o": "ö","u": "ü","ss": "ß"},multiple: false,// [0.2.0] BooleanmultiLimit: Infinity,// [0.3.0] Integer, InfinitymultiPinSelected: false,// [0.5.0] BooleanmultiContainer: false,// [0.3.0] Boolean, StringmultiShowCount: true,// [0.3.0] BooleanmultiShowLimit: false,// [0.5.0] BooleanmultiSelectAll: false,// [0.4.0] BooleanmultiSelectGroup: true,// [0.4.0] BooleanopenAbove: null,// [0.3.0] Boolean, nullplaceholder: null,// [0.2.0] String, nullsearch: false,// [0.3.0] BooleansearchConfig: [// [0.5.13] Array"text","value"],searchFocus: true,// [0.3.0] BooleansearchMarked: true,// [0.3.0] BooleansearchMinLength: 1,// [0.5.13] IntegersearchDisabled: true,// [0.5.5] BooleansortItems: false,// [0.3.0] String, Function, falsesortGroups: false,// [0.3.0] String, Function, falsesourceBind: false,// [0.5.0] BooleansourceHide: true,// [0.5.0] BooleanstartOpen: false,// [0.3.0] BooleanstayOpen: false,// [0.3.0] Booleanwidth: null,// [0.2.0] Integer, String, nullcbComplete: undefined,// [0.5.0] FunctioncbEmpty: undefined,// [0.5.0] FunctioncbLoopItem: undefined,// [0.4.0] FunctioncbLoopGroup: undefined// [0.4.0] Function});
Copyright & License
Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET
About
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
github.pytes.net/tail.select/
Resources
Readme
MIT license
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
tail.select - Beautify Select Fields
npm Versionnpm DownloadsSupport MeplainJSLicense
Replace and Improve your HTML <select> fields with style and without jQuery!
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.
Wanna see tail.select in action?
Wanna translate tail.select in your language?
Support

You really like my tail.select script and want to support me and all of my projects?

Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee
Features
  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.

    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3
Install & Embed
The master branch will always contain the latest Release, which you can download directly here
as .tar or as .zip
archive, or just visit the Releases Page
on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/

https://unpkg.com/tail.select/

Thanks To
Translations
Documentation
The Documentation has been moved to GitHubs Wiki Pages,
but I will keep a table of contents list here and some basic instructions.
Files
The tail.select package contains different JavaScript files:
  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.
Basic Instructions
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or
just a single selector as string, which calls the querySelectorAll() method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!DOCTYPE html><html><head><metacharset="utf-8" /><linktype="text/css" rel="stylesheet" href="css/tail.select-default.css" /></head><body><scripttype="text/javascript" src="js/tail.select.min.js"></script><!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --><select><option>My Option</option></select><scripttype="text/javascript">document.addEventListener("DOMContentLoaded",function(){tail.select("select",{/* Your Options */});});</script></body></html>
Default options
Please check out GitHubs Wiki Pages to read more
about each single option!
tail.select("select",{animate: true,// [0.3.0] BooleanclassNames: null,// [0.2.0] Boolean, String, Array, nullcsvOutput: false,// [0.3.4] BooleancsvSeparator: ",",// [0.3.4] Stringdescriptions: false,// [0.3.0] Booleandeselect: false,// [0.3.0] Booleandisabled: false,// [0.5.0] Booleanheight: 350,// [0.2.0] Integer, nullhideDisabled: false,// [0.3.0] BooleanhideSelected: false,// [0.3.0] Booleanitems: {},// [0.3.0] Objectlocale: "en",// [0.5.0] StringlinguisticRules: {// [0.5.9] Object"е": "ё","a": "ä","o": "ö","u": "ü","ss": "ß"},multiple: false,// [0.2.0] BooleanmultiLimit: Infinity,// [0.3.0] Integer, InfinitymultiPinSelected: false,// [0.5.0] BooleanmultiContainer: false,// [0.3.0] Boolean, StringmultiShowCount: true,// [0.3.0] BooleanmultiShowLimit: false,// [0.5.0] BooleanmultiSelectAll: false,// [0.4.0] BooleanmultiSelectGroup: true,// [0.4.0] BooleanopenAbove: null,// [0.3.0] Boolean, nullplaceholder: null,// [0.2.0] String, nullsearch: false,// [0.3.0] BooleansearchConfig: [// [0.5.13] Array"text","value"],searchFocus: true,// [0.3.0] BooleansearchMarked: true,// [0.3.0] BooleansearchMinLength: 1,// [0.5.13] IntegersearchDisabled: true,// [0.5.5] BooleansortItems: false,// [0.3.0] String, Function, falsesortGroups: false,// [0.3.0] String, Function, falsesourceBind: false,// [0.5.0] BooleansourceHide: true,// [0.5.0] BooleanstartOpen: false,// [0.3.0] BooleanstayOpen: false,// [0.3.0] Booleanwidth: null,// [0.2.0] Integer, String, nullcbComplete: undefined,// [0.5.0] FunctioncbEmpty: undefined,// [0.5.0] FunctioncbLoopItem: undefined,// [0.4.0] FunctioncbLoopGroup: undefined// [0.4.0] Function});
Copyright & License
Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET
About
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
github.pytes.net/tail.select/
Resources
Readme
MIT license
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
tail.select - Beautify Select Fields
npm Versionnpm DownloadsSupport MeplainJSLicense
Replace and Improve your HTML <select> fields with style and without jQuery!
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.
Wanna see tail.select in action?
Wanna translate tail.select in your language?
Support

You really like my tail.select script and want to support me and all of my projects?

Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee
Features
  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.

    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3
Install & Embed
The master branch will always contain the latest Release, which you can download directly here
as .tar or as .zip
archive, or just visit the Releases Page
on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/

https://unpkg.com/tail.select/

Thanks To
Translations
Documentation
The Documentation has been moved to GitHubs Wiki Pages,
but I will keep a table of contents list here and some basic instructions.
Files
The tail.select package contains different JavaScript files:
  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.
Basic Instructions
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or
just a single selector as string, which calls the querySelectorAll() method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!DOCTYPE html><html><head><metacharset="utf-8" /><linktype="text/css" rel="stylesheet" href="css/tail.select-default.css" /></head><body><scripttype="text/javascript" src="js/tail.select.min.js"></script><!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --><select><option>My Option</option></select><scripttype="text/javascript">document.addEventListener("DOMContentLoaded",function(){tail.select("select",{/* Your Options */});});</script></body></html>
Default options
Please check out GitHubs Wiki Pages to read more
about each single option!
tail.select("select",{animate: true,// [0.3.0] BooleanclassNames: null,// [0.2.0] Boolean, String, Array, nullcsvOutput: false,// [0.3.4] BooleancsvSeparator: ",",// [0.3.4] Stringdescriptions: false,// [0.3.0] Booleandeselect: false,// [0.3.0] Booleandisabled: false,// [0.5.0] Booleanheight: 350,// [0.2.0] Integer, nullhideDisabled: false,// [0.3.0] BooleanhideSelected: false,// [0.3.0] Booleanitems: {},// [0.3.0] Objectlocale: "en",// [0.5.0] StringlinguisticRules: {// [0.5.9] Object"е": "ё","a": "ä","o": "ö","u": "ü","ss": "ß"},multiple: false,// [0.2.0] BooleanmultiLimit: Infinity,// [0.3.0] Integer, InfinitymultiPinSelected: false,// [0.5.0] BooleanmultiContainer: false,// [0.3.0] Boolean, StringmultiShowCount: true,// [0.3.0] BooleanmultiShowLimit: false,// [0.5.0] BooleanmultiSelectAll: false,// [0.4.0] BooleanmultiSelectGroup: true,// [0.4.0] BooleanopenAbove: null,// [0.3.0] Boolean, nullplaceholder: null,// [0.2.0] String, nullsearch: false,// [0.3.0] BooleansearchConfig: [// [0.5.13] Array"text","value"],searchFocus: true,// [0.3.0] BooleansearchMarked: true,// [0.3.0] BooleansearchMinLength: 1,// [0.5.13] IntegersearchDisabled: true,// [0.5.5] BooleansortItems: false,// [0.3.0] String, Function, falsesortGroups: false,// [0.3.0] String, Function, falsesourceBind: false,// [0.5.0] BooleansourceHide: true,// [0.5.0] BooleanstartOpen: false,// [0.3.0] BooleanstayOpen: false,// [0.3.0] Booleanwidth: null,// [0.2.0] Integer, String, nullcbComplete: undefined,// [0.5.0] FunctioncbEmpty: undefined,// [0.5.0] FunctioncbLoopItem: undefined,// [0.4.0] FunctioncbLoopGroup: undefined// [0.4.0] Function});
Copyright & License
Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET
About
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
github.pytes.net/tail.select/
Resources
Readme
MIT license
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages