Font-Family Is Not Inherited to the Form Input Fields

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

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.

Font inheritance on input

Most HTML elements aren't assigned a font-family by the browser's user-agent style sheet, so they will inherit whatever you set on the body element.

Some elements, however, do receive styles from the user-agent, so they override the family you have on body. Inputs, buttons, and other form controls are often a problem.

In a CSS reset, it is very common to give these elements font-family: inherit example from normalize.css:

input {
  font-family: inherit;
}

Inherit will set the input to use whatever font-family it would normally inherit, so it will then use your styles set on body.

Why is 'font-family' not inherited in ' button ' tags automatically?

Form elements don't inherit font settings, you have to set these properties manually.

If you use font declaration for eg. body,

body {font-family: arial, sans-serif}

use just

body, input, textarea, button {font-family: arial, sans-serif}

or

input, textarea, button {font-family: inherit}

Why are CSS-styles not inherited by HTML form fields?

input, select, textarea button - They do not inherit by default but you can set it to inherit with css

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

Live Demo: http://jsfiddle.net/rvjKE/

body {

  font-family: courier;

}

input {

  width: 250px;

}

input.inherit {

  font-family: inherit;

}

<div>simple text should be courier</div>

<input type="text" value="input text - does not inherit" /><br/>

<input type="text" class="inherit" value="input text - inherit from css" />

Why isn't my select font-family property inheriting from body ?

If you use:

select {
  font-family: inherit;
}

It'll work fine. CSS is a little quirky when it comes to form controls.

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

By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using.

You'll have to target the form elements themselves if you want to change their font/text styles - should be easy enough by selecting them though, as you've just done.

As far as I know, only form elements are affected. Off the top of my head: input, button, textarea, select.

Spec for not-inheriting certain font settings in textarea

The answer to your question is pretty simple and it's not related to the specification. If you take the example of a textarea inside Google Chrome and inspect the element you will get the following:

The browser is applying a default font-family (and many other properties) so the inherit rule no more apply.

Now if you want to know how these default style are defined you need to consider each browser and its implementation since this is out of the scope of the CSS specification.

Why my child class doesn't inherit the font of parent class?

Inputs don't inherit the font of it's parent by default. You need to add:

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

---

Related Topics