从表单文本输入中删除分隔线

Question

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

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

Answer 1

你这里没有break-line。只是因为输入框的高度远远大于字体的大小。

Answer 2

我认为您应该使用 <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>

从表单文本输入中删除分隔线

Removing a break line from the form text input

css

forms

input

break