/* * MOAA shared select chevron — one source of truth for the dropdown arrow * on native 's built-in arrow can only be * replaced via CSS, not a React component. * * Link this file in every app's . It intentionally uses !important * so it wins over each app's per-context select rules (many of which set a * `background:` shorthand that would otherwise wipe the arrow). */ :root{ --moaa-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238C897F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Every ordinary single dropdown gets the one canonical chevron. */ select:not([multiple]):not([size]){ -webkit-appearance:none!important; -moz-appearance:none!important; appearance:none!important; background-image:var(--moaa-chevron)!important; background-repeat:no-repeat!important; background-position:right 7px center!important; background-size:12px 12px!important; padding-right:24px!important; } /* Read-only / disabled selects render as plain text in several apps — keep them arrow-free (small right gap only). */ select:not([multiple]):not([size]):disabled{ background-image:none!important; padding-right:8px!important; }