输入背景颜色会破坏样式吗？ [英] Input background colour destroys styling?

问题描述

我正在创建一个在）

这发生在几个浏览器。如果我设置除 #FFFFFF 之外的任何背景，也会发生。

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

我可以使用Javascript解决方案来模仿样式。 >

解决方案

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

最好的做法是，而不是试图让你的红背景输入模拟正常的，创建你自己的吸引人的造型！如果你喜欢这些光边框，请使用 border：1px #ccc solid 。如果你喜欢圆角，请利用 border-radius 和 -moz-border-radius 在浏览器开发的边缘，他们会有。对于那些不是，他们不会注意到差别。

总之，不要尝试使输入适合操作系统环境，将它们风格化到您自己网站的外观和感觉。这将为您的网站创建更好的设计：）

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.

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:

(Live demo)

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

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

I am open to Javascript solutions which emulate the style somehow.

解决方案

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.

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屋！