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

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

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

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

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


当前回答

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

$('[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. */
}

其他回答

您可以使用CSS更改HTML5输入的占位符颜色。如果碰巧,您的CSS冲突,此代码注释正常工作,您可以像下面这样使用(!important)。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

希望这会有所帮助。

这里还有一个例子:

.form控件::-webkit输入占位符{颜色:红色;宽度:250px;}h1小时{颜色:红色;}<div class=“col-sm-4”><input class=“form control”placeholder=“在此处输入文本..”ng model=“需要电子邮件”/></div>

尝试此css

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ddd;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #ddd;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #ddd;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #ddd;
}

将此CSS代码用于所有浏览器工作:

 ::placeholder{color:#ccc;}

  **HTML**

 <input class="form-control" placeholder="write Here..">

最简单的方法是:

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