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

【问题标题】：Increase font size in input field增加输入字段中的字体大小
【发布时间】：2018-01-16 11:41:05
【问题描述】：

我有一个很大的输入字段，我不知道如何在不使输入字段更大的情况下使文本更大。例如，当我将字体大小设置为 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;
}

【问题讨论】：

如果你能展示一些代码或一个可重现的小提琴会更好。
添加到我的 html 和 css 中。感谢您的建议

标签： html css input font-size

【解决方案1】：

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

body {
  font-size: 1em;
}

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

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

【讨论】：

效果很好。感谢您的建议和解释。