输入的背景颜色会破坏造型？ [英] Input background colour destroys styling?

问题描述

我创造下 jQuery验证的是验证一个表单。我想的光的红色背景颜色应用于这是无效的输入，需要进行修正。

I am creating a form which is validated under jQuery Validation. I want to apply a light-red background colour to inputs which are invalid and need to be corrected.

当我申请背景色：#FFCCCC; 来的输入，有吸引力的造型似乎被删除，硬边界替换它。例如，在Firefox文本输入：

When I apply background-color: #FFCCCC; to the input, the attractive styling seems to be removed and a hard border replaces it. For example, with a text input in Firefox:

（现场演示）

这会发生几个浏览器。它也会发生，如果我设置任何背景比其他 #FFFFFF 。

This occurs with several browsers. It also occurs if I set any background other than #FFFFFF.

有没有办法来preserve造型，同时将背景颜色？

Is there a way to preserve styling while applying a background colour?

的我打开的Javascript的解决方案，在某种程度上效仿的风格。的

推荐答案

对不起 - 输入元素任何种类的造型趋向于摧毁他们的操作系统/浏览器的默认值。默认的输入呈现在一个完全不同的方式 - 它不喜欢他们coded到浏览器CSS样式，遗憾的是

Sorry - any sort of styling on input elements tends to destroy their OS/browser defaults. The default inputs are rendered in an entirely different way - it's not like they're coded into the browser as CSS styles, unfortunately.

在这里做的最好的事情是，而不是试图让你的红色背景输入模拟常年偏多，创建自己的吸引力的造型！如果你喜欢那些光边框，使用边框：1px的固体#CCC 。如果你喜欢圆润的边角，利用边界半径和 -moz-边界半径 - 对于那些谁在浏览器开发的优势，他们将有'时间。对于那些谁不，他们不会注意到其中的差别。

The best thing to do here is, rather than try to make your red-background inputs emulate normal ones, create your own attractive styling! If you like those light borders, use border: 1px #ccc solid. If you like round corners, take advantage of border-radius and -moz-border-radius - for those who are on the edge of browser development, they'll have 'em. For those who aren't, they won't notice the difference.

在总之，不要试图让输入适合的操作系统环境，而是他们的风格你自己的网站的外观和感觉。这将会为您的网站创造更好的整体设计：）

In short, don't try to make the inputs fit in with the OS environment, but rather style them to your own site's look and feel. This will create better design for your website overall :)

这篇关于输入的背景颜色会破坏造型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！