On form elements why need to set font family again

HTML-CSS
#1

The font family again (select.textarea,input) and other settings? Is not inherited from body tag? Explain please?

select.textarea,input,button -- not inherited font family tag

Thanks.

#2

It’s not inherited, no, form elements have their own styling. You need to specify styling for all form elements.

1 Like
#3

select.textarea,input still you know any element where need set that not inherited font family and style? still button tag as I test

#4

if you’re careful, I’ll share a super-secret trick. Use the universal selector before you define your body etc. Do something like this:

* {
  /* define your CSS rules to apply to every element, whether form or not.
   * You can use this to override default styles on elements (like buttons) or to
   *   remove padding/margins from EVERYTHING. The asterisk is the lowest
   *   priority of all the selectors, so it is easily overridden by any rule that is
   *   more specific. And ANY rule is more specific.
   */
}

/* And from here on, apply your css like normal */
body {

}

As I said, though, be very very careful with the universal selector. It is easy to abuse, and can cause some seriously funky unexpected behavior if you’re not careful.

3 Likes
#5

@bestdesign
When I see an element that has a different type of font than it’s parent I add
font-family: inherit;
to fix the problem.

1 Like
#6

I used to do

* {
  box-sizing: border-box;
}

but now I only add that the items the have padding and input fields.
The universal selector can slow things down a bit because it will run those rules on every element.

1 Like
#7