html - 如何用css格式化输入框中的文本

Question

我正在尝试在访问者键入任何文本之前更改输入框中显示的占位符文本的字体颜色。

这是我的例子 http://santa.parseapp.com/

查看页面底部的文本框。我认为它目前正在使用用户代理样式表，这意味着表单元素没有创建样式？

我不确定我需要使用 CSS 定位哪个元素。这是我的做法:

form input[type=text] {
  width: 300px;
  margin-bottom: 7px;
  font-size: 20px;
  border: 0;
  padding: 5px 7px;
  background-color: #FF2950;
  color: #fff;
  }

Answer 1

听起来您正在寻找占位符文本的样式，是吗？

一般来说，除了颜色之外，占位符文本的样式与元素本身相同。因此，在您的示例中，占位符文本将为 color: grey 和 font-size: 20px。

如果你想专门定位占位符文本，你需要使用 :placeholder 伪类:

::-webkit-input-placeholder {
   color: blue;
}

::-moz-placeholder {
   color: blue;
}

:-ms-input-placeholder {  
   color: blue;
}