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中提供的原始组件，因为它是hidden ）

要实现您所要求的功能，在初始化之后，我在新的“ 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>

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

1 个答案: