从表单文本输入中删除换行符答案

【问题标题】：Removing a break line from the form text input从表单文本输入中删除换行符
【发布时间】：2020-10-02 08:15:08
【问题描述】：

HTML：

<div class="form-row">
  <div class="col-md-6 mb-3">
     <label for="validationCustom03">Service</label>
     <input type="text" class="form-control" id="validationCustom03" value="Describe service you need" required>
     <div class="invalid-feedback">
        Please write here a needed service.
     </div>
  </div>
</div>

CSS

#validationCustom03{
  height: 100px;
}

input[id=validationCustom03]{
  display:inline;
  padding-top: 0px;
  margin-top: 0px;
  color:red;
}

大家好，我正在尝试对表单的值进行风格化 - 文本输入，但我唯一能达到的就是红色。我的目的是删除文本前后的断线，从输入的第一行开始，请查看图片。感谢您的时间和智慧！

【问题讨论】：

标签： css forms input break

【解决方案1】：

我认为您应该使用<textarea> 表单属性而不是<input> 元素。这是一个例子：

#validationCustom03{
  height: 100px;
}

textarea[id=validationCustom03]{
  display:inline;
  padding-top: 0px;
  margin-top: 0px;
  color:red;
}

<div class="form-row">
  <div class="col-md-6 mb-3">
     <label for="validationCustom03">Service</label><br>
     <textarea rows="4" cols="50" name="comment" class="form-control" id="validationCustom03" form="usrform" value="Describe service you need" required>
Enter text here...</textarea>
     <div class="invalid-feedback">
        Please write here a needed service.
     </div>
  </div>
</div>

【讨论】：

【解决方案2】：

这里没有换行符。只是因为输入框的高度远大于字体的大小。

【讨论】：

那么你有什么建议呢？
这取决于您的需要。您需要单行输入字段还是多行输入字段？
假设输入 5 行