CODEWITHSUNDEEP
htmlcss
UserX
UserX

Reputation: 1327

Trying to give a font-family for a select option menu

Im trying to give a font-family to my options of my select menu but its not working.

Im trying with this code below, and it seems that works on google chrome, but on internet explorer Im having a different font-family.

Do you know how can I set a font-family to my options that works on chrome but also in internet explorer??

This is my html:

<div class="select_teams">
        <select name="teams">
           <option class="option">Select your team:</option>
           <option class="option" value="1">ACM</option>
           <option class="option" value="2">PSG</option>
           <option class="option" value="2">RM</option>
        </select>
 </div>

This is my css:

.select_teams select{min-width:250px; padding:10px; border:3px solid #CCC; font-size:18px;}
.select_teams .option{transition:none; font-family:'bariol_regularregular';}

On chrome and mozilla Im getting this:

enter image description here

On internet explorer Im getting this:

enter image description here

Upvotes: 0

Views: 903

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

Set the font on the select element, not on the option elements. Example:

.select_teams { font-family: 'bariol_regularregular'; }

The reason is that IE uses a uniform style for option elements, based on the style of their parent select element, instead of letting us style options individually. Cf. to Styling options in bold in Internet Explorer.

Upvotes: 1

RichardB
RichardB

Reputation: 2767

It's most likely down to how you are embedding the bariol_regularregular font.

You have no fallback font, so the browser will:

1 ) Try and use bariol_regularregular 2 ) Use the browser's default font

If you have embedded it correctly for Chrome but not IE, this is a possible solution: Safari and IE can't read TTF and EOT fonts

Using a similar font from Google Fonts may be a quicker fix - they do all that for you.

Upvotes: 1

Related Questions