Question

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

＆＃13;

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

＆＃13;

现在，对于他们中的每一个，我想将字体系列更改为实际的内部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>

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

1 个答案: