Why Is 'Font-Family' Not Inherited in '<Button>' Tags Automatically

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}

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.

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" />

---

Related Topics