Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生popover属性模拟下拉

原生popover属性模拟下拉

0