Removing a break line from the form text input

user_14219248 0
Viewed 305

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 !

This is how it looks like

break forms input css
2 Answers

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>

user_79569330

you don't have a break-line here. it is just because the height of the input field is much bigger than the size of the font.

user_126326640
Related