使用 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 字段不受您为 body 元素所做的字体变化的影响。您必须分别设置它们的样式。

要更改它，请使用

input[type=text] {
    font-size: inherit;
}

Answer 2

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

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

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