Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
这个简短而干净的代码:
::-webkit-input-placeholder {color: red;}
:-moz-placeholder {color: red; /* For Firefox 18- */}
::-moz-placeholder {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder {color: red;}
其他回答
对于Bootstrap和Less用户,有一个mixin.placeholder:
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}
不同浏览器中特定元素的占位符颜色。
HTML
<input class='contact' type="email" placeholder="majed@firefly.com">
CSS
.contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
.contact::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
.contact:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
.contact:-moz-placeholder { /* Firefox 18- */
color: pink;
}
输入::占位符{color:red;}<input-type=“text”placeholder=“value”>
我认为这段代码会起作用,因为占位符仅用于输入类型文本。因此,这一行CSS将足以满足您的需要:
input[type="text"]::-webkit-input-placeholder {
color: red;
}
这对大多数现代浏览器都很好
input::placeholder{
color: red; // css implementation
}
以防万一,如果您正在使用SCSS
input {
&::placeholder {
color: red; // scss
}
}