Question

在一个表单中，我同时具有文本输入和textarea输入，两者的格式均符合网站的图形准则。使用以下CSS，textarea字段仅在垂直居中的一行上显示文本，而不是我期望的那样。另外，文本字段的高度与textarea的高度相同，我不明白为什么。现在，我的目标是使文本字段格式完全独立于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，但只有垂直居中的单行文本，没有自动换行，而我需要自动换行和至少两行，并在垂直方向自动调整大小。同样，文本字段具有相同的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行并调整大小？

1 个答案: