MaterialiseCSS - 更改选择选项字体系列

Question

我有一个选择元素，如下所示：

<div class="input-field container">
  <select>
    <option selected>Roboto</option>
    <option>Kalam</option>
    <option>Karma</option>
    <option>Montserrat</option>
  </select>
</div>

现在，对于它们中的每一个，我想将字体系列更改为实际的内部html，以预览您要选择的字体。

但是直接在选项上添加样式对我来说不起作用。

我找到了一个针对css所有选项的解决方案，然而，这无法让我实现想要的行为。

有什么建议？

谢谢！

Answer 1

我试过CSS，但似乎没有用。

您可以使用javascript将样式设置为与option的值相同的样式属性：

document.querySelectorAll(".selectFont option").forEach(function(el){
  el.style.fontFamily = el.value;
})

<div class="input-field container">
  <select class="selectFont">
     <option value="monospace" selected>monospace</option>
     <option value="Arial" >Arial</option>
     <option value="sans-serif" >sans-serif</option>
  </select>
</div>