Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。

但以下CSS对占位符的值没有任何作用:

输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>

但Value仍将保持灰色而不是红色。

是否有方法更改占位符文本的颜色?


当前回答

/*不要将这些规则分组*/*::-webkit输入占位符{颜色:红色;}*:-moz占位符{/*第4-18页*/颜色:红色;不透明度:1;}*::-moz占位符{/*FF 19以上*/颜色:红色;不透明度:1;}*:-ms输入占位符{/*即10+*/颜色:红色;}*::-ms输入占位符{/*Microsoft边缘*/颜色:红色;}*::占位符{/*现代浏览器*/颜色:红色;}<input placeholder=“hello”/><br/><textarea placeholder=“hello”></textarea>

这将设置所有输入和文本区域占位符的样式。

重要提示:不要将这些规则分组。相反,为每个选择器制定一个单独的规则(组中的一个无效选择器将使整个组无效)。

其他回答

如果您正在使用Bootstrap,但无法使其工作,那么您可能错过了Bootstrap本身添加这些选择器的事实。这是我们正在讨论的Bootstrap v3.3。

如果您试图更改.form控件CSS类中的占位符,则应按如下方式重写它:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

在html文件中:

<input type="text" placeholder="placeholder" class="redPlaceHolder">

在css文件中:

.redPlaceHolder{
   color: #ff0000;
}

我不记得我在哪里找到了这个代码片段(它不是我写的,不记得我是在哪里找到的,也不记得是谁写的)。

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

只需加载此JavaScript代码,然后通过调用以下规则使用CSS编辑占位符:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

我已经在我的移动平台上尝试了各种组合来改变颜色,最终是:

-webkit-text-fill-color: red;

这一招奏效了。

最简单的方法是:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}