Question

我正在创建一个在jQuery Validation下验证的表单。我想将浅红色背景颜色应用于无效且需要更正的输入。

当我将background-color: #FFCCCC;应用于输入时，有吸引力的样式似乎被移除并且硬边框取代了它。例如，在Firefox中输入文本：

Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
（Live demo）

多个浏览器都会出现这种情况。如果我设置background之外的任何#FFFFFF，也会发生这种情况。

在应用背景颜色时是否有保留样式的方法？

我对以某种方式模仿风格的Javascript解决方案持开放态度。

Answer 1

抱歉 - 输入元素上的任何样式都会破坏其操作系统/浏览器默认值。默认输入以完全不同的方式呈现 - 不幸的是，它们不像CSS风格一样被编码到浏览器中。

在这里做的最好的事情是，而不是试图让你的红色背景输入模拟正常的，创建自己的吸引力的造型！如果您喜欢这些浅色边框，请使用border: 1px #ccc solid。如果您喜欢圆角，请利用border-radius和-moz-border-radius - 对于那些处于浏览器开发边缘的人来说，他们会拥有它们。对于那些没有的人，他们不会注意到差异。

简而言之，不要试图使输入适合OS环境，而是将它们设计为您自己网站的外观。这将为您的网站创造更好的设计：）

Answer 2

我认为控件的默认（Windows 2000）外观更易于为浏览器供应商实现。浏览器必须自己绘制所有内容，包括任何控件。他们看起来像是默认风格的本机对用户来说只是一点点便利但是没有像WPF那样真正花哨（和重量级）的东西，很快就变得难以用OS 和的视觉风格正确地绘制控件CSS已应用。

确切的样式也取决于操作系统，因此只提供一个外观的解决方案可能不是您网站的大多数访问者想要的。然后，再次使用CSS，您可以实现The One Look™。如果这恰好看起来像特定操作系统上的本机操作系统那么，那就这样吧： - ）

您正在寻找的内容可能会通过使用浅灰色边框进行模拟，并悬停/聚焦浅蓝色边框，模拟Vista和Windows 7的Aero外观。

Answer 3

简答：否。

浏览器和表单控件无疑是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很有趣。它展示了每个浏览器如何在文本框上应用不同的样式。

Answer 4

此处浏览器正在使用其默认样式。

我建议在BOTH输入中添加类似下面的CSS，然后它们看起来会保持一致。

border: solid 1px #ccc;

Answer 5

查看边框正常输入字段的样式。并将其应用于错误一。

Answer 6

将您的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将向您展示如何完全覆盖文本框样式。

输入背景颜色会破坏样式吗？

6 个答案: