CSS代码:
.ui-select-button {
anchor-name: --anchor-select;
position: relative;
width: fit-content;
}
.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:popover-open {
display: block;
position: absolute;
position-anchor: --anchor-select;
left: anchor(left);
top: anchor(bottom);
width: anchor-size(width);
margin-top: -1px;
}
HTML代码:
<button type="button" class="ui-select-button" popovertarget="selectList">
<span class="ui-select-text">选项4</span>
</button>
<ui-select-list id="selectList" popover class="ui-select-datalist">
<a class="ui-select-datalist-li disabled" data-index="0">选项1</a>
<a href="javascript:" class="ui-select-datalist-li" data-index="1">选项2</a>
<a href="javascript:" class="ui-select-datalist-li" data-index="2">选项3-我的内容有点多</a>
<a href="javascript:" class="ui-select-datalist-li selected" data-index="3">选项4</a>
<a href="javascript:" class="ui-select-datalist-li" data-index="4">选项5</a>
</ui-select-list>