如何在select禁用状态下为自定义箭头图标和按钮设置样式？

你的核心问题是选择器逻辑错误：select:disabled + filterItem::after完全不匹配DOM结构——filterItem是select的父容器，不是它的相邻兄弟元素（相邻兄弟是后面的button），所以这个选择器根本无法生效。

正确解决方案：使用:has()伪类 #

利用CSS的:has()伪类，我们可以直接选中包含禁用状态select的filterItem容器，进而修改它的::after箭头样式：

/* 替换你原来错误的select:disabled + filterItem::after选择器 */
.filterItem:has(select:disabled)::after {
    color: gray;
    opacity: 0.7;
}

修改后的完整代码示例 #

CSS代码

select, option {
    -webkit-appearance: none;
}

button.resetDropdownButton::after {
    content: "\2716";
}

.filterWrapper {
    margin: 0 1rem 1rem;
    position: relative;
}

.filterWrapper label {
    display: block;
    margin-bottom: .25rem;
}

.filterItem {
    position: relative;
}

.filterItem::after {
    content: '\f107';
    font: normal normal normal 12px/1 FontAwesome;
    color: black;
    right: 8px;
    top: -2px;
    height: 26px;
    padding: 15px 0px 0px 8px;
    position: absolute;
    pointer-events: none;
}

.filterItem select {
    width: 100%;
    padding-right: 2rem;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    border-radius: 6px;
    border: 2px solid #CBD2E0;
    transition: .2s all;
    cursor: pointer;
}

.filterItem select::-webkit-input-placeholder {
    color: var(--grey);
}

.filterItem select:focus {
    outline: none;
    background-color: rgba(214, 238, 247, 0.5);
    border: 1px solid var(--blue);
    box-shadow: 0 0 3px var(--blue);
}

.filterItem select > option {
    border-radius: 10px;
}

.filterWrapper .resetDropdownButton {
    position: absolute;
    top: auto;
    right: 1.15rem;
    bottom: .5rem;
    background-color: transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    border: 0 solid transparent;
    cursor: pointer;
}

.filterWrapper .resetDropdownButton:hover {
    text-decoration: underline;
}

select:disabled + button.resetDropdownButton::after {
    color: gray;
    opacity: 0.7;
}

select:disabled + button.resetDropdownButton:hover {
    text-decoration: none;
}

/* 正确的禁用状态箭头样式 */
.filterItem:has(select:disabled)::after {
    color: gray;
    opacity: 0.7;
}

HTML代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />

<div class="filterWrapper">
  <div class="filterItem">
      <select disabled>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <button class="resetDropdownButton"></button>
  </div>
</div>

兼容性说明 #

:has()伪类目前已被Chrome、Firefox（需开启layout.css.has-selector.enabled配置）、Safari等现代浏览器支持，如果需要兼容旧版浏览器，可以通过JavaScript监听select的disabled状态，给filterItem添加/移除自定义类（比如select-disabled），再通过.filterItem.select-disabled::after来修改样式。

内容的提问来源于stack exchange，提问作者Opay Hero