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

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 somethin开发者_JAVA技巧g wrong?

---

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.

---

there is nothing wrong with the code.. This is common as the input field takes the OS theme settings by default.. This has already been discussed in stackoverflow. Look into the below link for more details.

Why <textarea> and <textfield> not taking font-family and font-size from body?

---

Try changing your CSS body attribute to

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

The * forces every child element to inherit the specified value within the CSS rule you have written because of the CSS rules over specification. See the fiddle here

This is handy if you want every element on your page to have the same font-family value, not so handy if you do want your forms to have different value.

Smashing Magazine has an article that may help you further.

I hope it helps.

---

it worked for me:

tags-input *, tags-input *:before, tags-input *:after {
  font-family: "IRANSans" !important;
}

tags-input .tags .input {
  padding-right: 5px;
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}

tags-input .tags .tag-item {
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}