Assign the placeholder to a class selector like this:
.form-control::-webkit-input-placeholder { color: white; } /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; } /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; } /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; } /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge */
For example:
<form>
<div class="form-group">
<input type="text" class="form-control" id="address-1" [placeholder]="'check_out.address_line_1' | translate">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address-2" [placeholder]="'check_out.address_line_2' | translate">
</div>
<div class="form-group">
<input type="text" class="form-control" id="city" [placeholder]="'check_out.city' | translate">
</div>
</form>
//region Form Custom Styling
$form-font-size: 16px;
$form-font-opacity: 0.5;
.form-control {
@extend .font-bold;
color: $color-text-lighter-black;
font-size: $form-font-size;
}
.form-control::-webkit-input-placeholder {
font-family: AvenirNext-Bold;
color: $color-text-lighter-black;
opacity: $form-font-opacity;
font-size: $form-font-size;
} /* WebKit, Blink, Edge */
.form-control:-moz-placeholder {
font-family: AvenirNext-Bold;
color: $color-text-lighter-black;
opacity: $form-font-opacity;
font-size: $form-font-size;
} /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder {
font-family: AvenirNext-Bold;
color: $color-text-lighter-black;
opacity: $form-font-opacity;
font-size: $form-font-size;
} /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder {
font-family: AvenirNext-Bold;
color: $color-text-lighter-black;
opacity: $form-font-opacity;
font-size: $form-font-size;
} /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder {
font-family: AvenirNext-Bold;
color: $color-text-lighter-black;
opacity: $form-font-opacity;
font-size: $form-font-size;
} /* Microsoft Edge */
//endregion Form Custom Styling