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. Just like Photoshop does it.
I changed the CSS for each drop-down item but it only works on FireFox. It doesn't work on any other browser.
I don't want to use any jQuery plugin.
Unfortunately, the font size of a drop-down list can only be changed using VBA. However, you can make the font smaller around the drop-down box (or across the entire sheet), and then zoom in on the overall view. In this way, the font in the drop-down field is also displayed larger.
To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
Unfortunately, you can't change the font size or styling in a drop-down list that is created using data validation.
There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element.
That's because the select
elements children (option
s) aren't really stylable and firefox seems to be the only browser to ignore that part of the spec.
The workaround is to replace your select
element with a custom widget that uses only stylable elements and perhaps a little javascript for the interactivity. like what's done here: http://jsfiddle.net/sidonaldson/jL7uU/ or http://jsfiddle.net/theredhead/4PQzp/
You can do something like this
<select> <optgroup style="font-family:arial"> <option>Arial</option> </optgroup> <optgroup style="font-family:verdana"> <option>veranda</option> </optgroup>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With