css - 使用 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'>

为什么 font-size:1.1rem 在输入字段中不起作用？

如何获取整个页面的全局字体大小？

Answer 1

这是因为 input 已经有用户代理定义的 font-size 不像 p 元素所以 p 元素将继承 body 定义的值，input 将使用其自己的值，除非您覆盖它:

因此输入元素将具有 font-size 的计算值，如下所示:

如您所见，主体的字体被认为是默认字体，但它已被默认定义的字体覆盖。