html - 选择和输入的文本颜色

Question

这让我发疯了。我有一个表单，我将文本颜色设置为紫色，但由于某种原因，选择文本比输入文本“强”。想不通为什么！

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/和使用 CSS 更改 HTML5 输入的占位符颜色解释了如何设置样式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

如果您在谈论“选择”文本，那么添加它就可以了！

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

sroes 提到了占位符！

Answer 3

这就是 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] 的样式，您应该没问题。

最后，回答您的问题“有什么建议吗？” ：嗯，是的，我有一个：让我们下国际象棋或parcheesi。

Answer 4

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