/* ============================================================ EAZYDEV premium custom select (v3.45) ------------------------------------------------------------ A reusable, lightweight custom dropdown that PROGRESSIVELY ENHANCES every native stays in the DOM (overlaid, invisible, value intact) so form submission, AJAX filters, onchange handlers, validation and autofill all keep working — only the OS-rendered open option list (the part CSS can't theme) is replaced. Themes: .ez-sel light app + public shells .ez-sel--dark platform-admin dark shell (body.pa-shell) .ez-sel--sm compact (mirrors .form-select-sm / .sm) ============================================================ */ /* The wrapper takes the place of the original is overlaid invisibly so its value still submits and the browser validation bubble anchors correctly. */ .ez-sel__native { position: absolute; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; opacity: 0; pointer-events: none; /* kill the inherited chevron background so it never bleeds through */ background-image: none !important; z-index: 0; } /* The visible trigger — looks exactly like the themed .form-select. */ .ez-sel__trigger { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; border-radius: 11px; border: 1px solid var(--ink-200, #e2e8f0); background: rgba(255, 255, 255, 0.85); padding: 10px 14px; font-size: 14px; line-height: 1.3; color: var(--ink-800, #1e293b); text-align: left; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; -webkit-appearance: none; appearance: none; } .ez-sel__trigger:hover { border-color: rgba(99, 102, 241, 0.45); } .ez-sel__trigger:focus, .ez-sel.is-open .ez-sel__trigger { outline: none; border-color: var(--brand-500, #6366f1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .ez-sel__trigger:disabled, .ez-sel.is-disabled .ez-sel__trigger { background: var(--ink-100, #f1f5f9); color: var(--ink-400, #94a3b8); cursor: not-allowed; opacity: 0.8; } .ez-sel__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ez-sel__label.is-placeholder { color: var(--ink-400, #94a3b8); } .ez-sel__chev { flex: 0 0 auto; display: inline-flex; color: var(--brand-600, #4f46e5); transition: transform 0.18s ease; } .ez-sel.is-open .ez-sel__chev { transform: rotate(180deg); } .ez-sel__chev svg { display: block; } /* ---- compact variant ---- */ .ez-sel--sm .ez-sel__trigger { padding: 6px 11px; font-size: 13px; gap: 7px; border-radius: 10px; } /* ============================================================ The floating menu (appended to , position:fixed in JS so it is never clipped by an overflow:hidden card or modal). ============================================================ */ .ez-sel__menu { position: fixed; z-index: 4000; /* above Bootstrap modals (1055) + topbar */ min-width: 160px; max-width: calc(100vw - 16px); max-height: 280px; overflow-y: auto; overflow-x: hidden; background: #ffffff; border: 1px solid var(--ink-200, #e2e8f0); border-radius: 13px; box-shadow: 0 18px 44px -16px rgba(15, 23, 42, 0.34), 0 4px 12px rgba(15, 23, 42, 0.08); padding: 6px; opacity: 0; transform: translateY(-4px); transition: opacity 0.13s ease, transform 0.13s ease; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .ez-sel__menu.is-shown { opacity: 1; transform: translateY(0); } .ez-sel__opt { display: flex; align-items: center; gap: 9px; padding: 10px 12px; min-height: 42px; /* comfortable touch target on mobile */ border-radius: 9px; font-size: 14px; line-height: 1.35; color: var(--ink-800, #1e293b); cursor: pointer; overflow-wrap: anywhere; /* long option text wraps cleanly */ transition: background 0.12s ease, color 0.12s ease; } .ez-sel__opt + .ez-sel__opt { margin-top: 1px; } .ez-sel__opt:hover, .ez-sel__opt.is-active { background: rgba(99, 102, 241, 0.10); color: var(--brand-700, #4338ca); } .ez-sel__opt.is-selected { font-weight: 600; color: var(--brand-700, #4338ca); } .ez-sel__opt.is-selected::after { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-left: auto; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } .ez-sel__opt.is-disabled { color: var(--ink-400, #94a3b8); cursor: not-allowed; pointer-events: none; opacity: 0.65; } .ez-sel__group { padding: 9px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400, #94a3b8); } /* ---- custom scrollbar inside the menu ---- */ .ez-sel__menu::-webkit-scrollbar { width: 10px; } .ez-sel__menu::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } .ez-sel__menu::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.30); border-radius: 999px; border: 2px solid #fff; } .ez-sel__menu::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.50); } .ez-sel__menu { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.35) transparent; } /* ============================================================ Dark variant — platform-admin shell ============================================================ */ .ez-sel--dark .ez-sel__trigger { background: var(--pa-surface-2, #1e293b); border-color: var(--pa-border-2, #334155); color: var(--pa-text, #e2e8f0); font-size: 13px; } .ez-sel--dark .ez-sel__chev { color: #a5b4fc; } .ez-sel--dark .ez-sel__trigger:hover { border-color: rgba(129, 140, 248, 0.55); } .ez-sel--dark .ez-sel__trigger:focus, .ez-sel--dark.is-open .ez-sel__trigger { border-color: var(--pa-brand, #6366f1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); } .ez-sel__menu--dark { background: #1e293b; border-color: #334155; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.6); } .ez-sel__menu--dark .ez-sel__opt { color: #e2e8f0; } .ez-sel__menu--dark .ez-sel__opt:hover, .ez-sel__menu--dark .ez-sel__opt.is-active { background: rgba(129, 140, 248, 0.18); color: #fff; } .ez-sel__menu--dark .ez-sel__opt.is-selected { color: #c7d2fe; } .ez-sel__menu--dark .ez-sel__opt.is-selected::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7d2fe' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } .ez-sel__menu--dark .ez-sel__group { color: #64748b; } .ez-sel__menu--dark::-webkit-scrollbar-thumb { background: rgba(129,140,248,0.4); border-color: #1e293b; } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .ez-sel__trigger, .ez-sel__chev, .ez-sel__menu, .ez-sel__opt { transition: none !important; } .ez-sel__menu { transform: none !important; } }