Question

我使用样式表和<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'
  />

Answer 1

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

Answer 2

在你的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

Answer 3

只需将此代码放下即可。你的错误是忘了放冒号。

我花了很多时间在这里，但这一切都归结为在:-webkit-input-placeholder之后添加另一个冒号，使其成为::-webkit-input-placeholder。

我刚刚发现其他人的答案与我的方式完全相同，而且我并不打算复制它们，因为我自己想出来了。

看看完整的代码。 PS我让它看起来像草书font-family。

＆＃13;

#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;

如何更改<input />的占位符颜色？

3 个答案: