根据父文本标记更改<input />字体大小

Question

我正在写一篇＆＃34;自然语言＆＃34;表单如this one，因此我在文本中包含<input>标记，如下所示：

<h3>I am <input type="number" /> years old.</h3

我想知道是否有一种简单的方法可以将此输入的字体大小设置为与文本相同（在本例中为h3）？这样我就可以把它包含在h1＆＃39; s，h2＆＃39;等等，而不用担心字体大小。

主要原因是我使用Bootstrap作为我的排版，并且它做了很多我想要自动应用于我输入的魔法。

Answer 1

您可以使用font-size:inherit;使字体大小与其父级匹配。

HTML

<h3>I am <input class="inherit" type="number" /> years old.</h3>

CSS

.inherit {
  font-size: inherit;
}

以下是其中的一个小提琴：https://jsfiddle.net/uyxr7zm0/