Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 805
Mohal Avatar asked May 22 '12 05:05

Mohal


People also ask

How do I change the font in a drop-down list?

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.

How do you change the font of an element font-family?

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.

How do I increase the font size in data validation in a drop-down list?

Unfortunately, you can't change the font size or styling in a drop-down list that is created using data validation.

How do I style a selection dropdown in CSS?

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.


2 Answers

That's because the select elements children (options) 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/

like image 182
Kris Avatar answered Sep 29 '22 20:09

Kris


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> 

like image 40
Kazi Hasan Ali Avatar answered Sep 29 '22 20:09

Kazi Hasan Ali