Customizing HTML Input placeholder

I needed to create a placeholder for an HTML form input element that included a red asterisk for the required fields. I knew right away that I could not simply use input::placeholder to create this effect; although it could be used to customize the placeholder text font-size and color.

I found this answer and demo which provided a technique I would need to adapt for use in Bootstrap 4.

The markup looks like this:

<div class="form-group">
  <input id="test-input" name="test-input" required="" type="text" class="form-control" /> 
  <label class="custom-placeholder" for="test-input">Enter text</label>
</div>

CSS would then be:

.form-group {
  position: relative;
}

input[required] + .custom-placeholder {
  position: absolute;
  top: .5rem;
  left: 1rem;
}

input[required] + .custom-placeholder::after {
  content: " *";
  color: red;
}

input[required]:valid + .custom-placeholder {
  display: none;
}

The main adaptation to Bootstrap was to change the position of .form-group to relative to allow for absolute positioning of the label. The functionality is such that when you click on the label it brings the focus to the input which is cool.

Here is a demo:

See the Pen Custom placeholderin Bootstrap by Thomas Nicolosi (@teeehn) on CodePen.