變化<input>字體大小基於父文本標籤

Question

我正在寫一個「自然語言」的形式像this one，所以我包括<input>標籤直接在這樣的文字：

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

我想知道是否有一種簡單的方法可以將此輸入的字體大小設置爲與文本相同（在本例中爲h3）？這樣我可以將它包含在h1，h2等內，而不用擔心字體大小。

主要原因是我使用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/