.ui-select-button { min-width:80px; position:relative; text-align:start; box-sizing:content-box; font-size:100%; } .ui-select-button:has(+:popover-open) { border-color:var(--ui-blue,#2a80eb); border-radius:var(--ui-radius,4px) var(--ui-radius,4px) 0 0; } .ui-select-datalist { bottom:auto; right:auto; left:-999px; top:-999px; } .ui-select-datalist:popover-open { display:block; left:calc(var(--left) * 1px); top:calc(var(--top) * 1px - 1px); width:calc(var(--width) * 1px); } .ui-select-datalist-li { position:relative; } .ui-select-datalist-li:has(:enabled) { cursor:pointer; } .ui-select-datalist-li:has(:enabled:not(:checked)):hover { color:var(--ui-dark,#4c5161); background-color:var(--ui-list-hover,#f0f7ff); } .ui-select-datalist-li [type="radio"] { position:absolute; inset:0; opacity:0; cursor:inherit; } .ui-select-datalist-li:has(:checked) { background-color:var(--ui-list-selected,#e0f0ff); } .ui-select-datalist-li:has(:disabled) { opacity:var(--ui-opacity,.4); cursor:default; }
原生popover属性模拟下拉