스타일 가능한 select

<div class="v"><header>REAL SELECT <span id="selected">Forest</span></header><div class="stage selects"><label>Theme <select id="choice"><option value="forest">Forest</option><option value="ocean">Ocean</option><option value="sunset">Sunset</option></select></label><div class="preview" id="preview">selected value</div></div><div class="muted">keyboard · form · change event remain</div></div>

.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.selects{display:flex;align-items:center;justify-content:center;gap:10px}.selects label{display:flex;align-items:center;gap:7px}.selects select{appearance:base-select;font:inherit;color:var(--fg);padding:7px;border:1px solid var(--accent);border-radius:7px;background:var(--bg)}.selects select::picker(select){appearance:base-select}.preview{padding:12px;border-radius:8px;color:#fff;background:#0e9f6e;text-align:center;transition:background .3s}

const s=document.getElementById("choice"),p=document.getElementById("preview");const colors={forest:"#0e9f6e",ocean:"#147db2",sunset:"#b15e20"};function update(){p.style.background=colors[s.value];document.getElementById("selected").textContent=s.options[s.selectedIndex].textContent}s.addEventListener("change",update);let timer=setInterval(()=>{s.selectedIndex=(s.selectedIndex+1)%s.options.length;s.dispatchEvent(new Event("change"))},1000);s.addEventListener("pointerdown",()=>clearInterval(timer));update()