如何在Django的ModelChoiceField组件选中后修改字体颜色？

要实现选择菜单初始字体为白色、选中选项后变为绿色的效果，核心是通过CSS或JavaScript控制样式变化，Crispy Forms仅负责表单渲染，样式逻辑完全由前端代码实现。以下是具体方案：

方案一：纯CSS实现（推荐，无需JS） #

利用CSS属性选择器判断选择菜单是否有选中项（非默认空选项），动态切换字体颜色：

/* 初始状态：选择菜单文字为白色 */
.lineup-select {
    color: #ffffff;
    /* 可添加其他字体样式，比如字体大小、字体族 */
    font-family: Arial, sans-serif;
}

/* 选中非空选项后：文字变为绿色 */
.lineup-select:not([value=""]) {
    color: #008000;
}

/* 可选：设置下拉选项的文字颜色，避免下拉时文字看不清 */
.lineup-select option {
    color: #000000;
}

原理说明 #

你的表单中qb字段的widget已添加lineup-select类，Crispy Forms会将这个类正确渲染到<select>标签上。当用户选择了实际的QB选项时，<select>的value属性会被设置为对应球员的ID（非空字符串），此时:not([value=""])选择器生效，触发颜色变化。

方案二：JavaScript+CSS实现（兼容性更强） #

如果遇到旧浏览器不支持CSS属性选择器的情况，可以用JS监听选择菜单的change事件，动态添加/移除样式类：

1. 添加CSS类：

.lineup-select {
    color: #ffffff;
    font-family: Arial, sans-serif;
}

/* 选中状态的样式类 */
.select-selected-green {
    color: #008000;
}

2. 添加JavaScript代码（放在模板底部或静态JS文件中）：

// 获取选择菜单元素
const qbSelect = document.querySelector('.lineup-select');

// 监听选择变化事件
qbSelect.addEventListener('change', function() {
    if (this.value !== '') {
        this.classList.add('select-selected-green');
    } else {
        this.classList.remove('select-selected-green');
    }
});

// 页面加载时初始化（如果表单已有默认选中值）
window.addEventListener('load', function() {
    if (qbSelect.value !== '') {
        qbSelect.classList.add('select-selected-green');
    }
});

注意事项 #

• 无需修改你提供的Python表单代码，只需将上述CSS/JS代码添加到你的模板（比如<style>标签、<script>标签）或项目的静态文件中即可。
• 如果使用静态文件，确保在模板中正确加载静态资源（通过{% load static %}和<link>/<script>标签引入）。

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