MaterializeCSS - Change select option font family - html

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