css – 无法使用Bootstrap 3更改占位符颜色

前端之家收集整理的这篇文章主要介绍了css – 无法使用Bootstrap 3更改占位符颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
两个问题:

>我试图使占位符文本为白色。但它不工作。我使用Bootstrap 3. JSFiddle demo
>另一个问题是如何在不全局改变占位符颜色。也就是说,我有多个字段,我只想要一个字段有白色占位符,所有其他字段保持默认颜色。

提前致谢。

html:

<form id="search-form" class="navbar-form navbar-left" role="search">
    <div class="">
        <div class="right-inner-addon"> <i class="icon-search search-submit"></i>
            <input type="search" class="form-control" placeholder="search" />
        </div>
    </div>
</form>

css:

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
    background-color:#303030;
    font-size: 13px;
    color:white;

}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    /*  pointer-events: none; */
    cursor: pointer;
    color:white;
}


/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18 
:-moz-placeholder           { color: white; }
 FF 19+
::-moz-placeholder          { color: white; }
 IE 10+
:-ms-input-placeholder      { color: white; }

解决方法

将占位符分配给类选择器,如下所示:
.form-control::-webkit-input-placeholder { color: white; }
.form-control:-moz-placeholder { color: white; }
.form-control::-moz-placeholder { color: white; }
.form-control:-ms-input-placeholder { color: white; }

它会工作,因为一个更强的选择器可能是覆盖你的全球。我在一个平板电脑,所以我不能检查和确认哪个更强的选择器是:)但它的工作,我试过它在你的小提琴。

这也回答了你的第二个问题。通过将它分配给一个类或id,并给一个输入只有该类,你可以控制什么输入风格。

原文链接:https://www.f2er.com/css/221681.html

猜你在找的CSS相关文章