2

html{
 font-size:62.5%;
}

body{
 font-family:arial;
 font-size:1.1rem;
}
<p>LOREM IPSUM</p>
<p>LOREM IPSUM</p>

<input type = 'text' value = 'LOREM IPSUM'>

Why doesn’t font-size:1.1rem work inside input-fields?

How to get a global font-size for the entire page?

Jere
  • 1,196
  • 1
  • 9
  • 31
  • Your font size is equal in the input, but it sounds like you want it to be 1.1rem, is that right? Just add `input { font-size: 1.1rem; }` – duhaime Aug 12 '18 at 13:17
  • @duhaime, why specifying `font-size` for `body` is not enough? –  Aug 12 '18 at 13:18
  • 2
    check this out: https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body – duhaime Aug 12 '18 at 13:20

2 Answers2

5

It's because the input already have font-size defined by the user agent unlike p element so the p element will inherit the value defined by the body and input will use its own value unless you override it:

enter image description here

So the input element will have the computed value of font-size like follow:

enter image description here

As you can see, the font of the body is considered BUT it's overridden by the one already defined by default.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

The input fields are not effected by font variations you make for the body element. You have to style them separately.

To change that, use

input[type=text] {
    font-size: inherit;
}
Jere
  • 1,196
  • 1
  • 9
  • 31