纯CSS自定义select下拉框的样式实例页面

HTML代码：

<select class="ui-select">
  <optgroup label="分组1">
    <option>选项 1.1</option>
  </optgroup>
  <optgroup label="分组2">
    <option>选项 2.1</option>
    <option>选项 2.2</option>
  </optgroup>
  <hr>
  <optgroup label="分组3" disabled>
    <option>选项 3.1</option>
    <option>选项 3.2</option>
    <option>选项 3.3</option>
  </optgroup>
</select>

CSS代码：

.ui-select {
    appearance: base-select;
    line-height: 20px;
    padding: 9px 6px 9px 12px;
    font-size: var(--ui-font, 14px);
    font-family: system-ui;    
    color: var(--ui-dark, #4c5161);
    border-radius: var(--ui-radius, 4px);
    border: 1px solid var(--ui-border, #d0d0d5);
    background-color: var(--ui-white, #fff);
    transition: border-color var(--ui-animate-time, .2s), background-color var(--ui-animate-time, .2s);
    cursor: pointer;
}
.ui-select:hover {
    border-color: var(--ui-dark-border, #ababaf);
}
.ui-select::picker-icon {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: var(--ui-select-icon-arrow) no-repeat center;
    background-size: 20px 20px;
}
.ui-select:open {
    border-color: var(--ui-blue, #2a80eb);
    border-radius: var(--ui-radius, 4px) var(--ui-radius, 4px) 0 0;
}
.ui-select.reverse:open {
    border-radius: 0 0 var(--ui-radius, 4px) var(--ui-radius, 4px);
}
/* 下拉列表 */
.ui-select::picker(select) {
    appearance: base-select;
    border: 1px solid var(--ui-blue, #2a80eb);
    max-height: 306px;
    overflow: auto;
    overscroll-behavior: none;
    scrollbar-width: thin;
    text-align: left;
    top: calc(anchor(bottom) - 1px);
}
.ui-select.reverse::picker(select) {
    top: auto;
    bottom: calc(anchor(top) - 1px);
}
.ui-select option {
    display: block;
    line-height: 20px;
    padding: 9px 12px;
    color: var(--ui-dark, #4c5161);
    font-size: var(--ui-font, 14px);
    background-color: var(--ui-white, #fff);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color var(--ui-animate-time, .2s);
    box-sizing: border-box;
    overflow: hidden;
}
.ui-select option:checked {
    background-color: var(--ui-list-selected, #e0f0ff);
}
.ui-select option:hover {
    background-color: var(--ui-list-hover, #f0f7ff);
}
.ui-select option:disabled {
    color: var(--ui-gray, #a2a9b6);
    background-color: var(--ui-white, #fff);
    cursor: default;
}
.ui-select hr {
    border: 0;
    border-top: 1px solid var(--ui-border, #d0d0d5);
    opacity: var(--ui-opacity, .4);
    margin: 0 12px;
}
.ui-select optgroup {
    padding-top: 6px;
    font-weight: 700;
    color: var(--ui-dark, #4c5161);
    line-height: 20px;
}
.ui-select optgroup[label] {
    font-size: 0;    
}
.ui-select optgroup[label]::before {
    content: attr(label);
    display: block;    
    font-weight: 700;
    padding: 6px 12px;
    font-size: var(--ui-font, 14px);
    margin-bottom: -1.2em;
}
.ui-select optgroup option {
    text-indent: .5em;
}
.ui-select optgroup:not([label]):not(:first-child)::before {
    content: '';
    display: block;
    padding: 6px 12px 0;
    border-top: 1px solid var(--ui-border, #d0d0d5);
    opacity: var(--ui-opacity, .4);
    margin-inline: 12px;
}
.ui-select option::checkmark {
    display: none;
}
.ui-select::picker(select) {
    opacity: 0;
    transition: .2s allow-discrete;
}
.ui-select::picker(select):popover-open {
    opacity: 1;
}
@starting-style {
    .ui-select::picker(select):popover-open {
      opacity: 0;
    }
}