如何使用 html 加 css 设置 textarea 行和调整大小？

Question

在一个表单中，我有文本输入和文本区域输入，两者的格式都符合网站的图形指南。使用以下 css，textarea 字段仅在一行中显示文本，垂直居中，而不是我所期望的。此外，文本字段与文本区域的高度相同，我不明白为什么。现在我的目标是让文本字段格式完全独立于文本区域。并让 textarea 显示多行自动换行和仅垂直自动调整大小。

input[type=text],
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  width: 100%;
  padding: 12px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: normal;
}

input[type=textarea],
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  width: 100%;
  padding: 12px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: normal;
  height: 4em;
  word-wrap: normal;
  vertical-align: top;
  overflow: auto;
}

textarea.vert {
  resize: vertical;
}

<label for="title">Title<font class="red-evidence">*</font></label>
<input type="text" id="title" name="title" placeholder="Write your title here" required>
<label for="content">Content<font class="red-evidence">*</font></label>
<input type="textarea" id="content " name="content " placeholder="Write your content here " required>

正如我所说，上面的代码生成了一个具有一定高度的文本区域，但只有一个垂直居中的单行文本并且没有自动换行，而我需要自动换行和至少两行并自动调整大小垂直的。此外，文本字段采用与 textarea 相同的高度，而其 css 并未指定。我该如何解决这些问题？

Answer 1

如果您想使用多行来显示文本，请使用 textarea 元素而不是输入。

<textarea id="content " name="content " rows="5" placeholder="Write your content here " required > </textarea>

您可以相应地进一步定义您的css

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  width: 100%;
  padding: 12px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: normal;
  height: 4em;
  word-wrap: normal;
  vertical-align: top;
  overflow: auto;
}

如何使用 html 加 css 设置 textarea 行和调整大小？

How to setup textarea rows and resize using html plus css?

css

textarea

rows