Change font size inside input-fields with css

Question

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?

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
– duhaime, Commented Aug 12, 2018 at 13:17
@duhaime, why specifying font-size for body is not enough? — user7461846
– user7461846, Commented Aug 12, 2018 at 13:18

Temani Afif · Accepted Answer · 2018-08-12 13:44:58Z

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:

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

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

edited Aug 12, 2018 at 13:44

answered Aug 12, 2018 at 13:37

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jere · Accepted Answer · 2021-04-17 15:30:13Z

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

edited Apr 17, 2021 at 15:30

answered Aug 12, 2018 at 13:15

Jere

1,3021 gold badge13 silver badges35 bronze badges

Collectives™ on Stack Overflow

Change font size inside input-fields with css

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related