jquery - MaterializeCSS 更改某些选项的选项颜色

Question

我正在使用来自 MaterializeCSS 的选择下拉菜单.我想创建一个类来更改某些选项的文本颜色。有办法吗？

我看到我通常可以通过以下方式改变颜色:

.dropdown-content li>a, .dropdown-content li>span {
    color: red;
}

但这会影响所有下拉颜色为红色。有没有一种方法可以指定一个类，该类只能更改某些选项的文本颜色。

我一直在寻找类似以下的内容:

<option value='A'>A</option>
<option value='B' class='red'>B</option>
<option value='C'>C</option>

Answer 1

您不能从 html 更改 materializecss 的 javascript 组件的行为，因为它们被重写了(您看到的 select 不是您在 html 中提供的原始组件，因为那个是 隐藏)

为了实现您的要求，我在初始化之后对新的“option”元素使用了一个简单的循环。当它找到您想要的那个时，它会将元素的类设置为 materializecss 的辅助类 materialize-red-text。

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

function changeColor(){
  var options_elem = document.querySelectorAll(".dropdown-content li>a, .dropdown-content li>span");
  
  //index==0 is the disabled option element
  options_elem.forEach(function(element, index){
    if(index == "2") element.classList.add("materialize-red-text"); //or you could use class "redtext"
  });
}

.redtext {
    color: red !important;
}

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="input-field col s12">
  <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  <label>Materialize Select</label>
</div>