如何像输入字段一样设置文本区域的样式答案

【问题标题】：How to styling textarea like input field如何像输入字段一样设置文本区域的样式
【发布时间】：2019-09-13 17:07:32
【问题描述】：

我在设置 textarea 的样式时遇到问题，我使用 bootstrap 4 css

我试图自己设计样式，但如果我使用填充或边距，它会使 textarea 高度变大

.comment-box {
  padding: 0.8rem 1rem;
  border-radius: 30px;
}

&lt;textarea class="form-control comment-box" rows="1"&gt;&lt;/textarea&gt;

我希望这个文本区域看起来像输入字段，里面有按钮，就像这张图片一样

textarea input

【问题讨论】：

您设置它的样式就像设置input... 只需添加一个resize: none 以删除用户调整框的选项。但是，为什么要使用 textarea 看起来像一个输入而不是使用一个真实的输入呢？
我为什么用textarea，因为cmets列可以容纳很多文字

标签： html css bootstrap-4 textarea

【解决方案1】：

Here 是关于覆盖引导样式的完整解释。我相信您可以遵循该规则并解决该问题。

编辑：你也不需要执行他的第一步和第二步。您只能遵循 3 并创建覆盖引导样式的新样式

【讨论】：

【解决方案2】：

https://www.w3schools.com/howto/howto_css_contact_form.asp">这里是您答案的链接

这应该可以解决您的问题，请查看他们使用的 css 并使用它。

input[type="text"],
select,
textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 10px;
}

input[type="submit"] {
  border: none;
  background: #4aaaa5;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
}

【讨论】：