MaterializeCSS - 更改 select 选项字体系列

Question

I have a select element which looks like this:

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

Now, for every one of them, I want to change the font family to what the actual inner html is, to give a preview of the font you're about to select.

But putting styles directly on the option doesn't work for me.

I found a solution targeting all options from css, however, that wouldn't enable me to achieve the wanted behaviour.

Any suggestions?

Thanks!

Answer 1

I tried with CSS, but didn't seem to work.

You can use javascript to set the style same as the option 's value with the style attribute:

 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> 

Answer 2

This is quite old, but I had the exact same problem - I also wanted to change the font family for text in materialize select options, but after much css manipulation I could not get it to work.

I finally found this answer by wahmal - if you add the class 'browser-default' to your select element, it will remove the materialize styling. You can then change the font family of the options. (That said, it won't look like a materialize element any longer if you do this.) Example:

  <div>
    <select class="browser-default" id="font-dropdown">
       <option selected style="font-family: 'courier';">courier</option>
       <option style="font-family: 'arial;'">arial</option>
       <option style="font-family: 'Verdana;'">Verdana</option>
    </select>
    <label>Font</label>
  </div>

I did not need.important to get it to work. Hope this helps someone.

https://materializecss.com/select.html