Font-family is not inherited to the form input fields?

Question

Don't the html form input elements such as input text field or select box automatically inherit the font-family property from the body? For example:

body {  font-family:'Lucida Casual', 'Comic Sans MS'; } 

It will not use the above font in the below form input field:

<form>     <div>         <label for="name">Name</label>           <input id="name" name="name" type="text" />       <div> </form> 

Please have a look at http://jsfiddle.net/3fkNJ/

Is it common that we have to re-define the font family for the input fields, or am i doing something wrong?

Answer 1

Yes, you need to place the font in the input tag.

input{   padding:5px;   font-size:16px;   font-family:'Lucida Casual', 'Comic Sans MS';     } 

http://jsfiddle.net/jasongennaro/3fkNJ/1/

You can also use inherit to set the font on form fields.

input, textarea, select { font-family:inherit; } 

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDIT - explanation added

Most browsers render text inside form elements as that of the user's operating system. This is to keep, as I understand it, a common look and feel for the user. However, it can all be overwritten by the code above.