Bootstrap中的占位符颜色更改

Question

如何在Bootstrap中更改占位符颜色？

我尝试过的以下代码不起作用。

input::-webkit-input-placeholder {
        color: red;
}

input:-moz-placeholder {
        color: red;
}

Answer 1

对于Bootstrap 4，如果您使用的是SCSS，则只需override variable $input-placeholder-color，然后再导入引导程序。

// variable overrides
$input-placeholder-color: red;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Answer 2

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: red;
            opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: red;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
            color: red;
 }

以下是参考链接。 https://www.w3schools.com/howto/howto_css_placeholder.asp

Answer 3

在Bootstrap 4中，您可以这样更改它：

.form-control::-webkit-input-placeholder {
  color: red;
}