ändern <input> Schriftgröße basierend auf Eltern Text-Tag

Question

ich eine „Natural Language“ Form wie this one ich schreibe und deshalb schließe ich die <input>-Tags direkt in den Text wie folgt aus:

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

Ich mag würde zu wissen, ob es eine einfache Möglichkeit gibt, die Schriftgröße dieser Eingabe so einzustellen, dass sie der gleiche ist wie der Text (in diesem Fall h3)? Auf diese Weise könnte ich es in h1, h2 usw. einfügen, ohne sich Gedanken über die Schriftgröße machen zu müssen.

Der Hauptgrund ist, dass ich Bootstrap für meine Typografie verwende, und es macht eine Menge Magie, die ich automatisch auf meine Eingabe anwenden möchte.

Answer 1

Sie können font-size:inherit; verwenden, um die Schriftgröße mit dem übergeordneten Element übereinstimmen zu lassen.

HTML

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

CSS

.inherit { 
    font-size: inherit; 
} 

Hier ist eine Geige davon in Aktion: https://jsfiddle.net/uyxr7zm0/