How to set system fonts in a HTML select control?

Question

I have a select control in my project. I want to use this control to system fonts. How can I do it?
I searched but don't find any thing about HTML select.

 <select id="Select1">
       <option></option>
 </select>

Completely blank!!!..Post youre code or eleborate a bit more.. — Joke_Sense10, Oct 12 '13 at 07:48
What does "bind html select to system fonts" mean? You want to use some font in a select element? Then the question should be "How to use different font in a html select?" — Loïc Faure-Lacroix, Oct 12 '13 at 07:54
possible duplicate of [How to change font-family of drop down's list item?](http://stackoverflow.com/questions/10696004/how-to-change-font-family-of-drop-downs-list-item) — JJJ, Oct 12 '13 at 08:02

score 2 · Accepted Answer · answered Oct 12 '13 at 08:03

You'll need to target the select with CSS to change the font. In your CSS:

select {
    font-family: your-font-choice, your-second-choice, your-third-choice;
}

The caveat being that the only font change the will be visible is the default/selected option. When you click the dropdown button, the menu that shows all your options will have a font set by the browser, which you can't change for the most part. The alternative is to use a javascript built custom select input that will allow you to style everything.

Vikas Ghodke · Answer 2 · 2013-10-12T08:09:46.133

1

See the Demo here

select {
    font-family: arial;
    font-size: 22px;
}

Another Demo with custom google font

edited Oct 12 '13 at 08:09

answered Oct 12 '13 at 08:03

Vikas Ghodke

6,602
5
27
38

I want to set my system fonts in a html select, how do I it? – Saman Oct 12 '13 at 08:10

How to set system fonts in a HTML select control?

2 Answers2