Bootstrap中的占位符颜色更改

wsewodh2  于 12个月前  发布在  Bootstrap
关注(0)|答案(5)|浏览(202)

如何在Bootstrap中更改占位符颜色?
下面的代码,我试过了,不工作。

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

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

字符串

1zmg4dgp

1zmg4dgp1#

.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

lyfkaqu1

lyfkaqu12#

对于Bootstrap 4,如果您使用的是SCSS,只需在导入bootstrap之前覆盖变量$input-placeholder-color

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

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

字符串

ccgok5k5

ccgok5k53#

在Bootstrap 4中,你可以这样修改它:

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

字符串

kninwzqo

kninwzqo4#

试试这个“!重要”关键字

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

字符串

s6fujrry

s6fujrry5#

这是我在bootstrap 5.3中的工作

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

字符串

相关问题