我使用样式表和<input/>
尝试了以下内容,但占位符的颜色仍未更改并保持默认颜色。我做错了吗?
我的css样式表:
#input-field {
background-color: rgba(255,255,255,0.1);
border: 0;
border-radius: 5px;
width: 150px;
height: 40px;
padding: 12px;
box-shadow: none;
color: rgba(255,255,255,0.8);
}
:-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: blue;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: blue;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: blue;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: blue;
}
我的<input/>
:
<input
className="form-control"
id="input-field"
placeholder='Change This Color'
/>
答案 0 :(得分:3)
webkit需要两个冒号::
#input-field {
font-family: serif;
background-color: rgba(255,255,255,0.1);
border: 0;
border-radius: 5px;
width: 150px;
height: 40px;
padding: 12px;
box-shadow: none;
color: rgba(255,255,255,0.8);
}
::-webkit-input-placeholder {
color: blue;
}
:-moz-placeholder { /* Firefox 18- */
color: blue;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
color: blue;
opacity: 1;
}
:-ms-input-placeholder {
color: blue;
}
<input
className="form-control"
id="input-field"
placeholder='Change This Color'
/>
将font-family添加font-family: serif;
更改为#input-field
答案 1 :(得分:1)
在你的Html页面
<input
class="form-control"
id="input-field"
placeholder='Change This Color'
/>
在你的css页面
.form-control::-webkit-input-placeholder {
color: red;
width: 250px;
font-family:Helvetica Neue;
}
font-family:Helvetica Neue
正在为我工作here is the link
答案 2 :(得分:0)
只需将此代码放下即可。你的错误是忘了放冒号。
我花了很多时间在这里,但这一切都归结为在:-webkit-input-placeholder
之后添加另一个冒号,使其成为::-webkit-input-placeholder
。
我刚刚发现其他人的答案与我的方式完全相同,而且我并不打算复制它们,因为我自己想出来了。
看看完整的代码。 PS我让它看起来像草书font-family
。
#input-field {
background-color: rgba(255, 255, 255, 0.1);
border: 0;
border-radius: 5px;
width: 150px;
height: 40px;
padding: 12px;
color: red;
box-shadow: none;
font-family: cursive;
}
::-webkit-input-placeholder {
color: blue;
font-family: cursive;
}
:-moz-placeholder {
/* Firefox 18- */
color: red;
opacity: 1;
}
::-moz-placeholder {
/* Firefox 19+ */
color: red;
opacity: 1;
}
:-ms-input-placeholder {
color: red;
}
&#13;
<input className="form-control" id="input-field" placeholder='Change This Color' />
&#13;