Question

这有点烦人。似乎webkit（通过chrome 13 canary）正确地设计了各种输入类型，并且它以一种主要方式与设计发生冲突。

特别是，这些让我头疼：

选中的元素发光（通过轮廓）
占位符=文字样式
围绕着焦点的textarea和输入字段的丑陋发光

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

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

我知道你可以通过

来定位它

input::-webkit-input-placeholder

然而，这似乎不能像text-shadow这样的东西 - 这有点废话。 是否有人知道这是否可能是一个将被修复的错误，或者我是否需要重新使用javascript占位符解决方案？

搜索输入带有白色bg并删除基本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重置，它会取消影响它的user agent stylesheet（根据网络检查员）中的任何预定义样式。是否有任何重置可以做到这一点，所以尽管doctype是HTML5，元素的呈现方式与HTML5之前一样简单，并在基本CSS中遵循隐式规则设置？

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

Answer 1

一个好的表单重置样式表（带有一点JS）是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: Up and Running"引述：

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

所以我想你至少应该依赖于问题的那个方面的脚本解决方案，特别是考虑到目前为止没有版本的IE支持占位符文本。

Answer 5

CSS重置样式始终是一个良好的开端，因为它们可以为您节省前瞻。

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

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

webkit htm5 css重置输入元素

5 个答案: