java的css改变字体颜色_使用CSS更改HTML5输入的占位符颜色

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

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

input[placeholder], [placeholder], *[placeholder] { color: red !important; }

Value仍然是grey而不是red 。

有没有办法改变占位符文本的颜色？

#1楼

这个怎么样

没有CSS或占位符，但您获得相同的功能。

#2楼

在Firefox和Internet Explorer中，普通输入文本颜色会覆盖占位符的颜色属性。 所以，我们需要

::-webkit-input-placeholder {

color: red; text-overflow: ellipsis;

}

:-moz-placeholder {

color: #acacac !important; text-overflow: ellipsis;

}

::-moz-placeholder {

color: #acacac !important; text-overflow: ellipsis;

} /* For the future */

:-ms-input-placeholder {

color: #acacac !important; text-overflow: ellipsis;

}

#3楼

我不记得我在互联网上找到这段代码片段的地方(它不是我写的，不记得我找到它的地方，也不记得是谁写的)。

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

}

#4楼

对于Bootstrap和Less用户，有一个mixin .placeholder：

// Placeholder text

// -------------------------

.placeholder(@color: @placeholderText) {

&:-moz-placeholder {

color: @color;

}

&:-ms-input-placeholder {

color: @color;

}

&::-webkit-input-placeholder {

color: @color;

}

}

#5楼

这样可以正常工作。 在这里演示：

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; }