CSS anchor-size()函数模拟下拉框实例页面

回到相关文章 »

代码:

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>