How to add a font to a select?

4

I have the following link:

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">

And I would like to add it to a select.

I have already tried to put CSS in select { font-family: Arial} and it does not work.

Would anyone know how to put this font? Below the code I'm using to create select

<tr>
    <td colspan="2>
        <select name="lead_source" style="color:gray; width:100%; height:50px;" required="required">
            <option style="display:none;" value="" disabled selected>Como chegou até nós?</option>
            <option value="Anuncio" style="color:black">Anuncio</option>
        </select>
    </td>
</tr>

    
asked by anonymous 12.11.2015 / 13:41

2 answers

5

The font you want to add is Open Sans, the code you are setting is to add the Arial font.

That is, you should use a css like this:

select {
    font-family: 'Open Sans', sans-serif;
}

Edited:

I believe you are viewing the placeholder font, which by default is not affected by the code above. Try this:

::-webkit-input-placeholder {
    font-family: 'Open Sans', sans-serif;
}
:-moz-placeholder {
    font-family: 'Open Sans', sans-serif;
}
::-moz-placeholder {
    font-family: 'Open Sans', sans-serif;
}
:-ms-input-placeholder {
    font-family: 'Open Sans', sans-serif;
}

Edited 2

Try to make the definition online then, as in the example below:

<tr>
    <td colspan="2">
        <select name="lead_source" style="color:gray; width:100%; height:50px;" required="required">
            <option style="font-family:'Open Sans', sans-serif; display:none;" value="" disabled selected>Como chegou até nós?</option>
            <option style="font-family:'Open Sans', sans-serif; color:black" value="Anuncio">Anuncio</option>
        </select>
    </td>
</tr>

If it still does not work, one last attempt, but not recommended, would be to use a !important in the select css itself. Or, there is some other font property overwriting the select.

    
12.11.2015 / 13:46
1

CSS

select{
   font-family: "Open Sans";
}

Now using Inheritance of a Parent Element.

HTML

<div class="form-group">
   <select>
      <option> Teste de Fonte em Select </option>
   </select>
</div>

CSS

div.form-group{
   font-family: "Open Sans";
   font-size: 20px;
}

select{
   font-family: inherit;
   font-size: inherit;
}

The inherit inherits from the Parent element - in this case the div.form-group - properties. But as said, not all browsers understand this.

    
12.11.2015 / 13:45