两个问题:
>我试图使占位符文本为白色。但它不工作。我使用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,并给一个输入只有该类,你可以控制什么输入风格。