下拉选择框选中值颜色不保持：选中后恢复为黑色

你给<option>标签设置了不同颜色，但选中后显示文本变回黑色，这是因为原生<select>控件的选中显示区域颜色默认继承自身的color属性，而非选中<option>的颜色。原生CSS无法直接根据<select>的当前选中值设置样式，需要配合JavaScript或你正在使用的Knockout.js来实现。

现有代码 #

CSS

.appt-status option[value="0"] {
    color: #3EA47B;
}
.appt-status option[value="1"] {
    color: #3EA47B
}
.appt-status option[value="2"] {
    color: #FF0000;
}
.appt-status option[value="3"] {
    color: #FFA927;
}

HTML

<select class="form-control appt-status" data-bind="value: confirmationStatus, event:{ change: $parent.statusChanged}" >
    <option data-icon="" class="status-list" value="1" > Confirmed</option>
    <option class="status-list" value="2" >Reschedule</option>
    <option class="status-list" value="3" >Pending</option>
    <option class="status-list" value="0" >Not opted-in</option>
</select>

解决方案 #

方案1：原生JavaScript实现

通过监听change事件，根据选中的value动态设置<select>的颜色：

补充CSS（设置初始颜色）

/* 合并重复的option颜色规则 */
.appt-status option[value="0"],
.appt-status option[value="1"] {
    color: #3EA47B;
}
.appt-status option[value="2"] {
    color: #FF0000;
}
.appt-status option[value="3"] {
    color: #FFA927;
}

/* 设置select初始颜色（匹配默认选中的value=1） */
.appt-status {
    color: #3EA47B;
}

添加JavaScript

const statusSelect = document.querySelector('.appt-status');
const colorMap = {
    '0': '#3EA47B',
    '1': '#3EA47B',
    '2': '#FF0000',
    '3': '#FFA927'
};

// 页面加载时初始化颜色
statusSelect.style.color = colorMap[statusSelect.value];

// 选项变化时更新颜色
statusSelect.addEventListener('change', function() {
    this.style.color = colorMap[this.value];
});

方案2：Knockout.js整合实现

既然你在用Knockout，直接把颜色逻辑整合到ViewModel里更优雅：

ViewModel代码

function YourViewModel() {
    const self = this;
    self.confirmationStatus = ko.observable('1'); // 默认选中值

    // 计算选中状态对应的颜色
    self.statusColor = ko.pureComputed(function() {
        const colorMap = {
            '0': '#3EA47B',
            '1': '#3EA47B',
            '2': '#FF0000',
            '3': '#FFA927'
        };
        return colorMap[self.confirmationStatus()] || '#000';
    });

    // 保留你的statusChanged方法
    self.statusChanged = function() {
        // 原有逻辑...
    };
}

ko.applyBindings(new YourViewModel());

修改HTML绑定

<select class="form-control appt-status" 
        data-bind="value: confirmationStatus, 
                   event: { change: statusChanged },
                   style: { color: statusColor }" >
    <option data-icon="" class="status-list" value="1" > Confirmed</option>
    <option class="status-list" value="2" >Reschedule</option>
    <option class="status-list" value="3" >Pending</option>
    <option class="status-list" value="0" >Not opted-in</option>
</select>

原理说明 #

原生<select>的选中显示区域是浏览器自带的控件部分，它不会自动继承选中<option>的颜色属性。必须通过设置<select>自身的color来改变显示颜色，通过JS监听变化或Knockout计算属性动态绑定，就能让选中值和下拉选项颜色保持一致。

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