使用单选框模拟select下拉效果演示页面
展示
代码
-
HTML:
<div class="ui-select"> <button id="button" class="ui-select-button" popovertarget="select"> <span class="ui-select-text">请选择</span> </button> <menu id="select" popover class="ui-select-datalist"> <li class="ui-select-datalist-li"><input type="radio" name="type" value="">请选择</li> <li class="ui-select-datalist-li"><input type="radio" name="type" value="1">选项1</li> <li class="ui-select-datalist-li"><input type="radio" name="type" value="2">选项2</li> <li class="ui-select-datalist-li"><input type="radio" name="type" value="3" disabled>选项3</li> <li class="ui-select-datalist-li"><input type="radio" name="type" value="4">选项4</li> </menu> </div>
-
部分CSS:
.ui-select-button { min-width: 80px; position: relative; text-align: start; } .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; }
-
JS:
button.onclick = function () { const bounding = this.getBoundingClientRect(); this.parentElement.style.setProperty('--top', bounding.bottom + window.pageYOffset); this.parentElement.style.setProperty('--left', bounding.left + window.pageXOffset); this.parentElement.style.setProperty('--width', bounding.width); }; select.onclick = function (event) { if (event.target.type == 'radio') { this.hidePopover(); // 选择文字内容更新 button.firstElementChild.textContent = event.target.parentElement.textContent; } }