增加输入字段中的字体大小

Question

我有一个很大的输入字段，但我不知道如何在不使输入字段更大的情况下使文本更大。例如，当我将字体大小设置为 2em 时，输入字段会增大以占据整个页面。尝试修复它，line-height但没有成功。有什么建议么？谢谢。我添加了当前尺寸的图片，并且我希望文本填充该字段。

现在的情况

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：

<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>

Answer 1

您可以通过使用rem（或其他方法，如像素大小）来指定输入字段的高度来完成此操作。例如，此代码片段将输入文本大小设置为 ，2em但通过将高度设置为 来保持输入框“正常大小” 1rem。

body {
  font-size: 1em;
}

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

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