Bootstrap Textarea form feedback-icon position improvement

by Isaiah van Hunen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="form-group has-danger w-50">
  <label for="exampleTextarea">Current textarea form-control styling</label>
  <textarea class="form-control form-control-danger" id="currentTextarea" rows="5" placeholder="Example text"></textarea>
</div>
<div class="form-group has-danger w-50 mt-4">
  <label for="exampleTextarea">My proposed textarea form-control icon improvement</label>
  <textarea class="form-control form-control-danger" id="proposedTextarea" rows="5" placeholder="Lorum ipsum"></textarea>
</div>

CSS

textarea.form-control-success:not(#currentTextarea),
textarea.form-control-warning:not(#currentTextarea),
textarea.form-control-danger:not(#currentTextarea) {
  background-position-y: 0.5625rem;
}