webkit htm5 css重置输入元素

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.

形式化重置所有内容,而不是用于确保跨浏览器的一致表单.