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

Question

我在设置文本区域样式时遇到问题，我使用 bootstrap 4 css

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

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

<textarea class="form-control comment-box" rows="1"></textarea>

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

Answer 1

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

编辑： 而且你不需要实现他的第一步和第二步。您只能遵循 3 个并创建覆盖引导样式的新样式

Answer 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;
}