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

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:

.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

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

body {
  font-size: 1em;
}

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

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