How to change font-family of drop down's list item?

Question

I have a drop-down that lists font families. Like Tahoma, Arial, Verdana, etc. I want to change the font-family of each drop-down item according to the value it represents.

Answer 1

I am not the most CSS wise guy around, but it seems to me that if styling the select element changes the font, as many other answers submit, then a CSS rule referring to selects should work, too.

In my case I set the font-family on html and it applied everywhere except select elements. So I changed the rule to apply to html and select elements and it worked. Tested on Chrome and Edge (although Edge didn't need the select rule to begin with).

Bottom line: html, select { font-family: Verdana, Geneva, sans-serif; }