输入的字体粗细小于400

Question

I'm trying to use a font-weight of 300 for my site, and the text inside an input refuses to go thinner than 400. Here's an example:

http://jsfiddle.net/m8FZ6/3/

<span style="font-weight: 300;">300 weight:</span> <input type="text" value="text" style="font-weight: 300;"></input><br />
<span style="font-weight: 400;">400 weight:</span> <input type="text" value="text" style="font-weight: 400;"></input><br />
<span style="font-weight: 700;">700 weight:</span> <input type="text" value="text" style="font-weight: 700;"></input>

I've noticed this in FF 25, Chrome 30.0.1599.69, and IE10. Is there a way to make it work, or will I have to use a different element?

Answer 1

input elements (and others like textarea , etc.) do not inherit font from the parent element. They have their own default fonts.

If you change your CSS selector to html, input , you can see it has the appropriate font weight in all inputs.

Answer 2

you need to explicitly set the font family for input boxes

http://jsfiddle.net/m8FZ6/5/

input {font-family: 'Roboto';}