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?

score 67 · Accepted Answer · edited Apr 20 '18 at 02:05

67

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.

edited Apr 20 '18 at 02:05

YakovL

7,557
12
62
102

answered Jun 29 '11 at 12:37

Jason Gennaro

34,535
8
65
86

This does not work in case of jquery-autocomplete. Do you have a clue why? – Manas Paldhe Nov 10 '14 at 07:59
@ManasPaldhe it's probably because autocomplete has a more specific css selector. I checked http://jqueryui.com/autocomplete/ and it shows the `input` has an `id` of "tags". Set the font in that `id` and you should be good. – Jason Gennaro Nov 10 '14 at 14:51

score 4 · Answer 2 · edited May 23 '17 at 11:53

4

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?

edited May 23 '17 at 11:53

Community

1
1

answered Jun 29 '11 at 12:47

z0mBi3

1,534
8
9

score 1 · Answer 3 · answered Jun 29 '11 at 12:50

1

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.

answered Jun 29 '11 at 12:50

Ryan

1,878
1
14
17

2

This will work, but it's sloppy practice. Performance takes a hit from the `*` selector, and the `*` will take precedence in ways you might not implicitly expect. – J. M. Becker Mar 28 '12 at 00:56
1

It doesn't make it "sloppy practice", it just means when being used the person needs to understand what it is they are doing hence the Smashing Magazine reference. As far as performance, yes it uses greater browser overhead but if it is appropriate depends on the objective, should every element have the same font regardless or jus a few elements? If it's just a few elements then specifying in the selector is better. To me sunjie is clear that he wants all elements to have the same font regardless so my solution would be appropriate to enforce this, but yes, it will have its tolls elsewhere. – Ryan Mar 28 '12 at 14:55
1

I think you misunderstood, exactly what I claimed was "sloppy practice". While it would be preferable to avoid extraneous `*` selectors, just using one is not necessarily 'sloppy practice'. On the other hand, using your CSS to avoid inheritance idiosyncrasies IS "sloppy practice". Nowhere did the author state he wants *universally* precede selectors with a specified font-family. – J. M. Becker Mar 30 '12 at 00:16
Where the author didn't specifically say he wants everything to be inherited it is implied in the first line of the question, as it is implied it is an appropriate solution. The reference has been supplied so depending on his needs he has the choice. I appreciate your comment – Ryan Mar 30 '12 at 11:36
Thanks for your answer. I think your solution won't hurt performance. A lot of articles recommend using `*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }` so, we have some universal selectors anyway. – Ashraf Sabry Sep 02 '14 at 10:42

score 0 · Answer 4 · answered May 08 '16 at 07:00

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;
}

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

4 Answers4

Linked

Related