Schrift vergrößern im Eingabefeld

Question

Ich habe ein großes Eingabefeld und ich kann nicht herausfinden, wie man den Text vergrößert, ohne das Eingabefeld noch größer zu machen. Wenn ich beispielsweise die Schriftgröße auf 2 em setze, wächst das Eingabefeld so, dass es die ganze Seite einnimmt. Versucht es mit line-height zu reparieren und das hat nicht funktioniert. Irgendwelche Vorschläge? Vielen Dank. Ich habe ein Bild der aktuellen Größe eingefügt und möchte, dass der Text das Feld ausfüllt.

aktuelle Situation

HTML:

<table class="contact-table"> 
      <tr id="test"> 
       <td id="contact-image"> 
        <img id="library" src="library.jpeg"/> 
       </td> 
       <td id="contact-form"> 
        <div class="label-wrapper"> 
         <label for="name">Name</label> 
         <input id="name" type="text" name="name" class="top-input"> 
        </div> 
        <div class="label-wrapper"> 
         <label for="email">Email Address</label> 
         <input id="email" type="text" name="email" class="top-input"> 
        </div> 
        <div class="label-wrapper"> 
         <label for="message">Message</label> 
         <textarea id="message" type="text" name="message"></textarea> 
        </div> 
       </td> 
      </tr> 
     </table> 

CSS:

.contact-table { 
    width: 100%; 
} 

#contact-form { 
    width: 50%; 
    padding-right: 8%; 
} 

.label-wrapper { 
    text-align: center; 
    display: inline-block; 
    font-size: 2em; 
} 

.top-input { 
    width: 30em; 
    height: 4em; 
    border-radius: 5px; 
    display: inline-block; 
    border: white; 
    line-height: inherit; 
    font-size: 
} 

#message { 
    width: 61em; 
    height: 30em; 
    border-radius: 5px; 
    border: white; 
} 

Answer 1

Sie können dies tun, indem rem (oder ein anderes Verfahren, wie Pixelgröße) mit der Höhe zu diktieren des Eingabefeldes. Beispielsweise legt dieses Snippet die Eingabetextgröße auf 2em fest, behält aber das Eingabefeld "normale Größe" bei, indem es die Höhe auf 1rem setzt.

body { 
 
    font-size: 1em; 
 
} 
 

 
#inputField { 
 
    font-size: 2em; 
 
    height: 1rem; 
 
}

<p>Normal Text</p> 
 
<input id="inputField" />