求助：选中时修改方向箭头颜色的CSS实现方案

你已经实现了选中状态下按钮主体的橙色渐变背景，但通过::before/::after伪元素实现的方向箭头（.btn-dir类）没跟着变色，问题出在没给选中状态的伪元素设置颜色规则。

解决方案 #

你的禁用状态是用--colored-icon变量控制伪元素颜色，所以选中状态也需要针对这个变量赋值，或者直接设置伪元素样式：

添加以下CSS规则：

/* 选中状态下伪元素箭头变色 */
li.grayd.selected:before, li.grayd.selected:after {
    --colored-icon: #ff7f00; /* 替换成你需要的选中态颜色，比如和主体匹配的橙色 */
}

如果你的箭头不是用--colored-icon变量控制，而是直接写死的background或border颜色，就直接修改对应属性：

li.grayd.selected:before, li.grayd.selected:after {
    background-color: #ff7f00; /* 箭头用背景色实现时 */
    /* 或者 border-color: #ff7f00; 箭头用边框实现时 */
}

完整修改后的CSS示例 #

li.grayd:hover, li.grayd.selected, li.grayd.selected:active  { 
    background: #c5c5c5; /* Old browsers */
    background: linear-gradient(180deg, var(--main-color) 0%,var(--light-color) 90%);
}

.btn-dir, li.grayd.selected, li.grayd.selected:active {
    border-top: white;
}

/* 新增：选中状态下箭头变色 */
li.grayd.selected:before, li.grayd.selected:after {
    --colored-icon: #ff7f00;
}

/* inactive directions according to current section */
li.grayd.disabled { 
    pointer-events: none;
    cursor: not-allowed;
}

li.grayd.disabled:before, li.grayd.disabled:after { 
    --colored-icon: #dddddd;
}

说明 #

原来的CSS只处理了disabled状态的伪元素颜色，完全没管selected状态。加上新增规则后，当li带有selected类时，其伪元素会应用你指定的颜色变量，箭头就能跟着主体一起变色了。

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