选择和输入的文本颜色

Question

这让我疯了。我有一个表单，我将文本颜色设置为紫色，但由于某种原因选择文本是＆＃34;更强＆＃34;比输入文字。无法弄清楚原因！

http://jsfiddle.net/ZtyHS/

有什么建议吗？

我的CSS：

.formBox, .normSelect {
    color: purple;
    font-size: 15px;
    padding: 6px 8px 5px;
    outline-color: transparent;
    -webkit-border-radius: 2px;
    border-radius: 2px; 
}

Answer 1

您所看到的是placeholder，这是未输入任何值时显示的文字。 http://css-tricks.com/snippets/css/style-placeholder-text/和Change an HTML5 input's placeholder color with CSS解释了如何设置placeholder：

的样式

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

Answer 2

如果您在字段中输入内容，您会注意到您的输入与选择框文本的颜色相同。有什么不同？它是占位符文本。请参阅此答案，以获得比占位符样式更好的解释：https://stackoverflow.com/a/2610741/495935

Answer 3

如果您正在谈论“选择”文字，那么添加它将有效！

 font-weight:100;
 font-size: 12px;

sroes已提到占位符！

Answer 4

这就是firefox将对“占位符”文本执行的操作

input::-moz-placeholder, textarea::-moz-placeholder {
  display: inline-block !important;
  opacity: 0.54;  /* <-- SEE THIS ? */
  overflow: hidden !important;
  pointer-events: none !important;
  resize: none !important;
}

默认情况下，每个“支持”浏览器都会设置样式。

请参阅http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

使用sroes答案来设置输入[placehorder]的样式，你应该没问题。

最后，回答你的问题'有什么建议吗？' ：嗯，是的，我有一个：让我们下棋或参加比赛。