markdown Bootstrap - 更改表单的占位符文本样式

Posted 2021-05-06

# How to change the placeholder's text style in Bootstrap's form input field

[SOURCE](https://stackoverflow.com/a/20774043)

Assign the placeholder to a class selector like this:

```css
.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:

```html
  <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>
```

```css
  //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
```