Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。

但以下CSS对占位符的值没有任何作用:

输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>

但Value仍将保持灰色而不是红色。

是否有方法更改占位符文本的颜色?


当前回答

这会很好的。此处演示:

input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#666;}输入:-moz占位符,文本区域:-moz占位符{颜色:#666;}input::-moz占位符,文本区域::-moz占位符{颜色:#666;}input:-ms输入占位符,文本区域:-ms输入占位符{颜色:#666;}<input type=“text”placeholder=“Value”/>

其他回答

跨浏览器解决方案:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

资料来源:David Walsh

我认为这段代码会起作用,因为占位符仅用于输入类型文本。因此,这一行CSS将足以满足您的需要:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

此代码将使用::占位符选择器更改占位符的颜色。

::-webkit-input-placeholder { 
    /* Edge */
    color: red;
}

:-ms-input-placeholder { 
    /* Internet Explorer */
    color: red;
}

::placeholder {
    color: red;
}

将此CSS代码用于所有浏览器工作:

 ::placeholder{color:#ccc;}

  **HTML**

 <input class="form-control" placeholder="write Here..">

HTML的一部分:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

我将展示如何通过CSS更改“Enter sentence”表达式的颜色:

  ::placeholder{
  color:blue;
   }