css - 用于输入元素的 webkit htm5 css 重置

Question

这有点烦人。看起来 webkit(通过 chrome 13 canary)在设计各种输入类型的样式方面做得很好，并且在很大程度上与设计发生冲突。

尤其是，这些让我很头疼:

• 选定的元素发光(通过轮廓)
• placeholder= 文本样式
• 聚焦的文本区域和输入字段周围有丑陋的光芒

我正在使用样板和 modernizr。

带有占位符的简单 input[type=search] 会覆盖文本样式。

我知道你可以通过

input::-webkit-input-placeholder

但是，这似乎无法设置诸如 text-shadow 之类的样式 - 这有点废话。 有谁知道这是否可能是一个会被修复的错误，或者我是否需要退回到 javascript 占位符解决方案？

搜索输入带有白色 bg，并删除了基 CSS 类中定义的圆 Angular 。我找到了重置代码:

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=search] {
  /* the webkit overrides need to stay at the top */
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  /* your styles here */
}

这有点帮助。

我通过设置 outline: none 修复了表单元素周围的发光。

我想我真正想要的是一个 CSS 重置，它删除了 user agent stylesheet 中影响它的任何预定义样式(根据 web inspector)。是否有任何可用的重置可以做到这一点，所以尽管 doctype 是 HTML5，元素仍像 HTML5 之前一样简单地呈现，并遵循基本 CSS 中为它们设置的隐式规则？

我不想这么说，但尽管存在所有占用内存的问题和插件的缓慢，FireFox 4 实际上完美地呈现了一切。 Webkit 不应该尝试为您设置样式，只是提供一个 API，让您可以在需要时这样做……

Answer 1

一个好的表单重置样式表(带有一点点 JS)是 Formalize .

Formalize 会重置所有内容，并且会确保跨浏览器的表单一致。