webkit htm5 css 重置输入元素

Question

这有点烦人。看来 webkit（通过 chrome 13 canary）在设计各种输入类型方面做得很好，但它与设计在很大程度上发生了冲突。

特别是，这些让我头疼：

• 选定的元素发光（通过轮廓）
• 占位符=
• 围绕焦点文本区域和输入字段的文本样式丑陋的发光

我正在使用样板和现代化。

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

我知道你可以通过

input::-webkit-input-placeholder

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

搜索输入带有白色背景，并删除了中定义的圆角CSS 基类。我找到了一个重置​​代码：

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 重置，删除用户代理样式表中任何影响它的预定义样式（根据网络检查器）。是否有任何可用的重置可以做到这一点，以便尽管文档类型是 HTML5，但元素的渲染方式与 HTML5 之前一样简单，并遵循基本 CSS 中为它们设置的隐式规则？

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

Answer 1

一个好的表单重置样式表（带有一点点 JS）是 Formalize。

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

Answer 2

尽管这可能需要您定义额外的样式，但我通常将 -webkit-appearance:none 放置在大多数表单元素上。

Answer 3

这似乎对我来说非常有效：

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
}

Answer 4

引用 Mark Pilgrim 的“HTML5：启动并运行”：

“占位符属性只能
包含文本，而不是 HTML 标记。
然而，有一些
供应商特定的 CSS 扩展
（http://trac.webkit.org/export/37527/trunk/LayoutTests/fast/forms/placeholder-pseudo-style.html）
允许您设计样式
某些浏览器中的占位符文本。

所以我想你至少必须依靠脚本解决方案来解决你的问题的这方面，特别是考虑到到目前为止没有 IE 版本支持占位符文本。

Answer 5

CSS 重置样式始终是一个好的开始，因为它们可以让您省去麻烦。

如果你想消除发光，你可以像你说的那样稍微调整一下outline属性，同时设置text-shadow:none可能会有所帮助。

无论如何，这只是猜测您是否首先尝试通过重置来重置样式，毕竟它们是专门为使网页在每个浏览器上显示相同而设计的。