frutjam/dist/components/select.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.select{font:inherit;--radius-select:calc(var(--border-radius)*2);--color-select-active:var(--color-base-active);--select--inline:0.75rem;--select--block:0.625rem;--select--font-size:1rem;border-width:1px;border-style:solid;border-color:var(--color-select-active);background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;padding-inline:var(--select--inline);padding-inline-end:2.5rem;padding-block:var(--select--block);font-size:var(--select--font-size);color:var(--color-on-base);display:inline-flex;align-self:flex-start;flex-shrink:0;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-select);vertical-align:middle;white-space:nowrap;position:relative;cursor:pointer;transition:border-color .25s;transition-timing-function:ease-in-out;&:focus-visible{outline-width:2px;outline-style:solid;outline-color:light-dark(var(--color-base-950),var(--color-base-50));outline-offset:3px}&:focus,&:focus-within{border-color:light-dark(var(--color-base-800),var(--color-base-300));@supports (color:color-mix(in lab,red,red)){border-color:light-dark(var(--color-base-800),color-mix(in oklab,var(--color-base-300) 80%,transparent))}}&:disabled{cursor:not-allowed;opacity:.6;pointer-events:none;background-color:var(--color-base-soft);-webkit-user-select:none;-moz-user-select:none;user-select:none}@supports ((-webkit-appearance:base-select) or (-moz-appearance:base-select) or (appearance:base-select)){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select;&::picker-icon{display:none}&::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select;background-color:var(--color-base);color:var(--color-on-base);border-width:1px;border-style:solid;border-color:var(--color-base-active);border-radius:var(--radius-select);padding:.375rem;margin-block:.375rem;box-shadow:0 10px 15px -3px oklch(0 0 0/.1),0 4px 6px -4px oklch(0 0 0/.1)}option{border-radius:calc(var(--radius-select) - 2px);padding-inline:.625rem;padding-block:.375rem;cursor:pointer;transition:background-color .15s ease-in-out;&::checkmark{color:var(--color-select-active)}&:not(:disabled){&:focus-visible,&:hover{background-color:var(--color-base-soft);outline:none}}&:disabled{opacity:.4;cursor:not-allowed}}}}.select-dashed{border-style:dashed}.select-ghost{border-color:transparent;background-color:transparent;&:focus,&:focus-within{border-color:var(--color-select-active)}}.select-soft{background-color:var(--color-select-soft,var(--color-base-soft));border-color:transparent}.select-accent{--color-select-active:var(--color-accent-active);&:focus,&:focus-within{border-color:var(--color-accent-400)}}.select-error{--color-select-active:var(--color-error-active);&:focus,&:focus-within{border-color:var(--color-error-400)}}.select-info{--color-select-active:var(--color-info-active);&:focus,&:focus-within{border-color:var(--color-info-400)}}.select-neutral{--color-select-active:var(--color-neutral-active);&:focus,&:focus-within{border-color:var(--color-neutral-400)}}.select-primary{--color-select-active:var(--color-primary-active);&:focus,&:focus-within{border-color:var(--color-primary-400)}}.select-secondary{--color-select-active:var(--color-secondary-active);&:focus,&:focus-within{border-color:var(--color-secondary-400)}}.select-success{--color-select-active:var(--color-success-active);&:focus,&:focus-within{border-color:var(--color-success-400)}}.select-warning{--color-select-active:var(--color-warning-active);&:focus,&:focus-within{border-color:var(--color-warning-400)}}.select-2xl{--select--inline:1.25rem;--select--block:1rem;--select--font-size:1.025rem}.select-lg{--select--inline:0.9rem;--select--block:0.75rem;--select--font-size:1rem}.select-md{--select--inline:0.75rem;--select--block:0.625rem;--select--font-size:1rem}.select-sm{--select--inline:0.6rem;--select--block:0.5rem;--select--font-size:0.875rem}.select-xl{--select--inline:1rem;--select--block:0.875rem;--select--font-size:1rem}.select-xs{--select--inline:0.475rem;--select--block:0.375rem;--select--font-size:0.75rem}