我正在创建一个在jQuery Validation 下验证的表单。我想对无效且需要更正的输入应用浅红色背景色。
当我将background-color: #FFCCCC; 应用于输入时，吸引人的样式似乎已被删除，并且替换为硬边框。例如，在 Firefox 中输入文本：
Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
(Live demo)
这发生在几个浏览器上。如果我设置除#FFFFFF 以外的任何background，也会发生这种情况。
有没有办法在应用背景颜色的同时保留样式？
我对以某种方式模拟这种风格的 Javascript 解决方案持开放态度。
【问题讨论】：
抱歉 - 输入元素上的任何样式都会破坏它们的操作系统/浏览器默认设置。默认输入以完全不同的方式呈现 - 不幸的是，它们不像 CSS 样式那样被编码到浏览器中。
最好的办法是，不要试图让您的红色背景输入模仿正常输入，而是创建您自己的有吸引力的样式！如果您喜欢那些浅色边框，请使用border: 1px #ccc solid。如果您喜欢圆角，请利用border-radius 和-moz-border-radius - 对于那些处于浏览器开发边缘的人来说，他们会拥有它们。对于那些不知道的人，他们不会注意到差异。
简而言之，不要试图让输入适应操作系统环境，而应根据您自己网站的外观设计它们的样式。这将为您的网站整体创造更好的设计:)
【讨论】：
我会说控件的默认 (Windows 2000) 外观对于浏览器供应商来说更容易实现。浏览器必须自己绘制所有内容，包括任何控件。它们在默认样式中看起来是原生的，这对用户来说只是一点点方便，但如果没有像 WPF 这样真正花哨（和重量级）的东西，使用操作系统的视觉样式正确绘制控件很快就会变得笨拙和已应用 CSS。
确切的样式还取决于操作系统，因此您的网站的大多数访问者可能并不想要一个让您完全看一眼的解决方案。再说一次，仅使用 CSS 您可以实现 The One Look™。如果这恰好看起来像特定操作系统上的原生操作系统，那么就这样吧:-)
您正在寻找的内容可能会通过使用浅灰色边框和悬停/聚焦浅蓝色边框来模拟一点，模拟 Vista 和 Windows 7 的 Aero 外观。
【讨论】：
简答：不。
浏览器和表单控件无疑是 CSS 中最不一致的部分。我只能建议在输入字段上使用 1px 边框，因为大多数浏览器都使用类似的东西。 CSS3 圆角应该也可以在一些浏览器中使用。
input.text {
border: 1px solid #ccc;
background-color: #fcc;
border-radius: 4px;
-moz-border-radius: 4px;
}
你会发现this page at 456 Berea Street 很有趣。它展示了每个浏览器如何在文本框上应用不同的样式。
【讨论】：
把你的 HTML 改成这样：
<p><input type="text" value="text" style="border:1px solid #999999;" /></p>
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p>
编辑：如果您希望它在所有浏览器中看起来一致，而不仅仅是在 Mozilla 中略微圆润，那么您将不得不做更多的工作。 Here's a link 将向您展示如何完全覆盖文本框样式。
【讨论】：
此处浏览器使用其默认样式。
我建议在两个输入中添加类似以下 CSS 的内容，然后它们看起来会保持一致。
border: solid 1px #ccc;
【讨论】：
查看普通输入字段的边框样式。并将其应用于错误之一。
【讨论】：