Materialize表单选中选项颜色修改失效问题求助

嘿，我完全懂你在搞极简反转配色时的挫败感——普通标签用内联CSS改颜色轻轻松松，但select和它的选项就是死活不生效，对吧？这其实是因为Materialize的Select组件不是用原生select直接渲染的，而是套了一层自定义UI结构，父元素的内联样式根本传不进去。下面给你一套亲测有效的解决方案：

核心原因 #

Materialize会把原生的<select>标签隐藏，然后生成一个自定义的.select-dropdown元素作为显示触发器，下拉选项则是用.dropdown-content里的<li>模拟的。这些自定义元素的默认样式优先级比父元素的继承样式高，所以直接给父div加color: white完全没用。

解决方案步骤 #

1. 定义自定义CSS类 #

在你的样式文件里添加以下代码（别用内联，类选择器的优先级更高）：

/* 自定义反转select的样式类 */
.inverted-select {
  color: white; /* 辅助父容器的颜色继承 */
}

/* 修改下拉触发器的文本颜色 */
.inverted-select .select-dropdown {
  color: white !important;
}

/* 修改下拉选项的文本颜色 */
.inverted-select .dropdown-content li>span {
  color: white !important;
}

/* 修改标签的颜色 */
.inverted-select label {
  color: white !important;
}

/* 可选：修改原生select的颜色（虽被隐藏，部分场景可能需要） */
.inverted-select select {
  color: white !important;
}

2. 给容器添加自定义类 #

把你的HTML代码修改成这样，给input-field的div加上我们定义的.inverted-select类：

<div class="input-field col s6 inverted-select">
  <select>
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Canada</option>
    <option value="3">Mexico</option>
  </select>
  <label>Country</label>
</div>

3. 确保Select组件已初始化 #

Materialize的Select需要JS初始化才能正常工作，别忘记在页面里加上这段代码（根据项目选择原生JS或jQuery版本）：

原生JS版本：

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
});

jQuery版本：

$(document).ready(function(){
  $('select').formSelect();
});

为什么这个方法有效 #

我们用更具体的CSS选择器直接定位到Materialize生成的自定义元素，再用!important强制覆盖框架的默认样式（如果你的样式优先级足够高，也可以不用!important，但加了更保险）。

试试这套方案，应该就能完美实现你想要的反转配色效果了！

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