Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
现在,我们有了一种标准的方法来将CSS应用于这个CSS模块Level 4草稿中输入的占位符::占位符伪元素。
其他回答
这个简短而干净的代码:
::-webkit-input-placeholder {color: red;}
:-moz-placeholder {color: red; /* For Firefox 18- */}
::-moz-placeholder {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder {color: red;}
您还可以设置文本区域的样式:
input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#FF9900;}输入:-moz占位符,文本区域:-moz占位符{颜色:#FF9900;}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好!”></text区域>
Compass有一个开箱即用的混音器。
举个例子:
<input type="text" placeholder="Value">
在SCSS中使用指南针:
input[type='text'] {
@include input-placeholder {
color: #616161;
}
}
有关输入占位符mixin,请参阅文档。
HTML的一部分:
<form action="www.anything.com">
<input type="text" name="name"
placeholder="Enter sentence"/>
</form>
我将展示如何通过CSS更改“Enter sentence”表达式的颜色:
::placeholder{
color:blue;
}
对于使用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;
}