输入背景色会破坏样式?

抱歉-输入元素上的任何样式都会破坏其操作系统/浏览器的默认设置。默认输入是以完全不同的方式呈现的——不幸的是,它们不像css样式那样被编码到浏览器中。

在这里最好的做法是,不要试图让你的红色背景输入模仿正常的,创造你自己有吸引力的风格!如果你喜欢那些浅色边框,使用 border: 1px #ccc solid . 如果你喜欢拐弯,利用 border-radius 和 -moz-border-radius -对于那些处于浏览器开发边缘的人来说,他们会拥有他们,而对于那些不在浏览器开发边缘的人来说,他们不会注意到两者的区别。

简言之,不要试图使输入与操作系统环境相适应,而是根据自己网站的外观和感觉来设计它们。这将为您的网站创建更好的总体设计:)

我认为默认的(windows 2000)控件外观对于浏览器供应商来说更容易实现。浏览器必须自己绘制所有内容,包括任何控件。对于用户来说,它们在默认样式下看起来是本地的,这只是一个小小的方便,但是如果没有像wpf这样的真正奇特(和重量级)的东西,很快就难以用os的视觉样式正确地绘制控件。 和 应用CSS。

确切的风格也取决于操作系统,因此,一个能让你只看到一个外观的解决方案可能不是你网站的大多数访问者想要的。再次重申,只使用css你可以实现一个外观。如果在特定的操作系统上看起来像本地操作系统,那么就这样:-)

你要找的东西可能会被一个浅灰色的边框和一个浅蓝色的边框所模仿,模仿vista和windows 7的航空外观。

简而言之:不。

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

这里浏览器使用默认样式。

我建议在这两个输入中添加类似于以下css的内容,这样它们看起来就一致了。

border: solid 1px #ccc;

检查常规输入字段为border获取的样式。并将其应用于错误1。

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