Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
您可以将其用于输入和焦点样式:
input::-webkit-input-placeholder { color:#666;}
input:-moz-placeholder { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */
其他回答
我认为这段代码会起作用,因为占位符仅用于输入类型文本。因此,这一行CSS将足以满足您的需要:
input[type="text"]::-webkit-input-placeholder {
color: red;
}
这对大多数现代浏览器都很好
input::placeholder{
color: red; // css implementation
}
以防万一,如果您正在使用SCSS
input {
&::placeholder {
color: red; // scss
}
}
在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;
}
试试这个吧
input::placeholder
color:#900009;
}
对于使用Bourbon的SASS/SCSS用户,它具有内置功能。
//main.scss
@import 'bourbon';
input {
width: 300px;
@include placeholder {
color: red;
}
}
CSS输出,您也可以抓取这部分并粘贴到代码中。
//main.css
input {
width: 300px;
}
input::-webkit-input-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}