MaterializeCSS - Change select option font family

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!

score 1 · Answer 1 · answered Mar 01 '18 at 14:01

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>

answered Mar 01 '18 at 14:01

Phiter

14,570
14
50
84

the style is applied to the element, but it's still not showing :/ – OhMad Mar 01 '18 at 14:07
What browser? It works on chrome. But some browsers don't accept styling in options. You'll need to use something else for that. – Phiter Mar 01 '18 at 14:08
I'm on chrome as well. – OhMad Mar 01 '18 at 14:08
yes, I did. Could materialize be the problem in this case? – OhMad Mar 01 '18 at 14:11
Not sude, it's possible. – Phiter Mar 01 '18 at 14:14

score 0 · Answer 2 · answered Aug 04 '22 at 02:49

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

MaterializeCSS - Change select option font family

2 Answers2