Removing a break line from the form text input

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

Hello guys, I am trying to stylize the value of form - text input, but the only one thing I can reach is red color. My purpose is to remove break line before and after the text, to make is from the very first line in the input, please check out the picture. Thank you for your time and wisdom !

Answer 1

I think you should use a <textarea> form attribute instead of an <input> element. Here's an example:

#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>