输入背景色破坏造型？

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

当我将background-color: #FFCCCC;应用于输入时，吸引人的样式似乎被删除，而硬边框替换它。例如，对于在Firefox文本输入：

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

这发生多个浏览器。如果我设置了除#FFFFFF之外的其他background，也会发生这种情况。

有没有办法在应用背景颜色时保留样式？

我打开Javascript模式，以某种方式模拟风格。

来源

2009-05-18 strager

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

来源

2009-05-18 22:44:18

请问您可以重新填写表格吗？我不确定你在说什么。 = S – strager 2009-05-18 22:46:47

我认为他意味着你应该查看默认样式（边框）并在设置背景后手动应用它们。我怀疑这会起作用，但因为默认样式不会因为背景而改变。虽然控制器的渲染:) – Joey 2009-05-18 22:58:41

改变你的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这将告诉你如何完全覆盖文本框样式。

来源

2009-05-18 22:48:37

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

我会建议添加类似下面的CSS到两个输入，然后他们会看起来一致。

border: solid 1px #ccc;

来源

2009-05-18 22:49:12

我想说，控件的默认（Windows 2000）外观更容易实现浏览器供应商。浏览器必须自己绘制所有内容，包括任何控件。它们在默认样式中看起来很原始，但对用户来说只是一点点方便，但是没有像WPF那样真正喜欢（和重量级）的东西，它很快就会很难用正确绘制操作系统的OS 和 CSS的视觉样式来控制。

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

您正在寻找的东西可能会通过使用浅灰色边框和悬停来模拟/聚焦浅蓝色，仿效Vista和Windows 7的Aero外观。

来源

2009-05-18 22:57:31 Joey

简短回答：没有。

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

来源

2009-05-18 23:13:24 DisgruntledGoat

对不起 - 任何类型的输入元素样式往往会破坏他们的操作系统/浏览器默认值。默认输入以完全不同的方式呈现 - 不幸的是，它们不像编码到浏览器中那样是CSS样式。

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

简而言之，不要试图使输入适合OS环境，而应该将它们设计为您自己网站的外观和风格。这将为您的网站创建更好的设计:)

来源

2009-05-18 23:32:04 Matchu

输入背景色破坏造型？

回答

相关问题