【问题标题】: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;
}
<textarea class="form-control comment-box" rows="1"></textarea>

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-11-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-19
      相关资源
      最近更新 更多