如何使用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 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;
}