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

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

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

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

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


当前回答

这对大多数现代浏览器都很好

input::placeholder{
  color: red; // css implementation
}

以防万一,如果您正在使用SCSS

input {
  &::placeholder {
    color: red; // scss
  }
}

其他回答

/*不要将这些规则分组*/*::-webkit输入占位符{颜色:红色;}*:-moz占位符{/*第4-18页*/颜色:红色;不透明度:1;}*::-moz占位符{/*FF 19以上*/颜色:红色;不透明度:1;}*:-ms输入占位符{/*即10+*/颜色:红色;}*::-ms输入占位符{/*Microsoft边缘*/颜色:红色;}*::占位符{/*现代浏览器*/颜色:红色;}<input placeholder=“hello”/><br/><textarea placeholder=“hello”></textarea>

这将设置所有输入和文本区域占位符的样式。

重要提示:不要将这些规则分组。相反,为每个选择器制定一个单独的规则(组中的一个无效选择器将使整个组无效)。

HTML的一部分:

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

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

  ::placeholder{
  color:blue;
   }

尝试此css

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ddd;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #ddd;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #ddd;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #ddd;
}

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

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

::占位符{颜色:红色;}<input-type=“text”placeholder=“Value”>