Bootstrap 中的占位符颜色更改

Question

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

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

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

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

Answer 1

.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 2

对于 Bootstrap 4，如果您使用 SCSS，只需在导入 bootstrap 之前覆盖变量

$input-placeholder-color

。

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

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

Answer 3

在 Bootstrap 4 中你可以像这样改变它：

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

Answer 4

这在 Bootstrap 5.3 中对我有用

input::placeholder {
    color: white !important;
}
input[type="text"]{
    padding-inline: 45px;
}

Answer 5

尝试使用

!important

关键字

.input::placeholder {
     color: red !important;
     opacity: 1;
}

Answer 6

只需在定义组件的位置发布样式标签，它将覆盖继承的 CSS。我想它适用于任何版本。

return (
    <div clasName="Form">
        <style type="text/css">
            {`
                .form-control::placeholder{color:red;opacity:0.2}
            `}
        </style>
        ... 
    </div>
)