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 psuedo-class：

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

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

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

Answer 2

检查这个小提琴：

http://jsfiddle.net/7r2d9/1/

form input[type=text]:focus {
  color: black;
}

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

2 个答案: