@ezmodus/select-picker/dist/style.css

Improve HTML <select> element to have live search and better selection process. Written with native JavaScript

.ezmodus-select{position:relative;line-height:1}.ezmodus-select>select{display:none}.ezmodus-select.open-menu .ezmodus-menu{visibility:visible}.ezmodus-select.open-menu .ezmodus-menu ul{height:auto}.ezmodus-select .ezmodus-dropdown{display:flex;flex-wrap:nowrap;align-items:center;border:1px solid #ced4da;border-radius:3px;background-color:#fff;width:auto;padding:0 6px 1px 0;justify-content:space-between;cursor:pointer}.ezmodus-select .ezmodus-dropdown .text{padding:.375rem 1.75rem .375rem .75rem;color:#000;text-align:left;white-space:nowrap}.ezmodus-select .ezmodus-dropdown .tick{display:inline-block;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\" fill=\"%236c6c6c\"/></svg>");background-repeat:no-repeat;width:1rem;height:1rem;flex-shrink:0;flex-grow:0}.ezmodus-select .ezmodus-dropdown.disabled{cursor:default;color:#666;background-color:#f2f2f2}.ezmodus-select .ezmodus-dropdown.disabled .tick{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\" fill=\"%23c4c4c4\"/></svg>")}.ezmodus-select .ezmodus-menu{position:absolute;z-index:5;visibility:hidden;background-color:#fff;border:1px solid #ced4da;border-radius:3px 3px 0 0;min-width:144px;max-width:initial;transition:height .2s ease-in-out,visibility .2s ease-out}.ezmodus-select .ezmodus-menu.with-search{min-width:192px;max-width:initial}.ezmodus-select .ezmodus-menu .ezmodus-search{padding:6px 12px 0 12px}.ezmodus-select .ezmodus-menu .ezmodus-search input{padding:6px 12px;width:100%;border:1px solid #d6d6d6;border-radius:3px;color:initial;background-color:initial}.ezmodus-select .ezmodus-menu .ezmodus-search input:focus,.ezmodus-select .ezmodus-menu .ezmodus-search input:focus-visible,.ezmodus-select .ezmodus-menu .ezmodus-search input:focus-within{outline-color:initial}.ezmodus-select .ezmodus-menu .ezmodus-search input::-webkit-input-placeholder{color:initial}.ezmodus-select .ezmodus-menu .ezmodus-clear{padding:6px 12px 3px 12px}.ezmodus-select .ezmodus-menu .ezmodus-clear button{cursor:pointer;width:100%;height:32px;border:1px solid #d6d6d6;border-radius:3px;color:#2b2b2b;background-color:#efefef}.ezmodus-select .ezmodus-menu .no-results{display:none;padding:6px 12px}.ezmodus-select .ezmodus-menu ul{list-style-type:none;overflow-x:hidden;overflow-y:auto;margin:6px 0 0 0;padding:0;height:0}.ezmodus-select .ezmodus-menu ul li.group{padding:6px 12px;color:#000;background-color:rgba(0,0,0,0);margin-left:18px}.ezmodus-select .ezmodus-menu ul li.group:hover{background-color:rgba(0,0,0,0)}.ezmodus-select .ezmodus-menu ul li.group .item-wrapper{display:flex;align-items:flex-start}.ezmodus-select .ezmodus-menu ul li.group .item-wrapper .text{font-weight:600}.ezmodus-select .ezmodus-menu ul li.item{padding:6px 12px;color:#000;background-color:rgba(0,0,0,0);cursor:pointer}.ezmodus-select .ezmodus-menu ul li.item.group-item{padding-left:30px}.ezmodus-select .ezmodus-menu ul li.item:hover:not([data-disabled=true]){background-color:#d6d6d6}.ezmodus-select .ezmodus-menu ul li.item.selected .item-wrapper .checkmark{opacity:1}.ezmodus-select .ezmodus-menu ul li.item[data-disabled=true]{cursor:initial;color:#999;background-color:rgba(0,0,0,0)}.ezmodus-select .ezmodus-menu ul li.item[data-disabled=true] a .subtext{color:#999}.ezmodus-select .ezmodus-menu ul li.item a{display:flex;flex-direction:column;user-select:none;width:100%;min-height:1.2rem}.ezmodus-select .ezmodus-menu ul li.item a .item-wrapper{display:flex;align-items:flex-start}.ezmodus-select .ezmodus-menu ul li.item a .item-wrapper .checkmark{display:inline-block;flex-shrink:0;opacity:0;margin-right:6px;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\" fill=\"%236c6c6c\"/></svg>");background-repeat:no-repeat;width:1rem;height:1rem}.ezmodus-select .ezmodus-menu ul li.item a .item-wrapper .text{padding:0 12px 0 0}.ezmodus-select .ezmodus-menu ul li.item a .subtext{color:#6c6c6c;margin-left:6px;padding:6px 0 3px 1rem}