7

这有点烦人。似乎 webkit（通过 chrome 13 canary）在设置各种输入类型的样式方面做得很好，并且在很大程度上与设计相冲突。

特别是，这些让我很头疼：

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

我正在使用样板和modernizr。

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

我不想这么说，但尽管存在内存占用问题和插件运行缓慢，但 FireFox 4 实际上完美地呈现了一切。Webkit 不应该尝试为您设置样式，只需提供一个 API，如果您愿意，您可以这样做...

4

5 回答 5

5

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

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

于 2011-06-27T12:59:33.927 回答
3

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

于 2012-10-19T19:40:22.860 回答
1

这似乎对我很有效：

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;
}
于 2013-09-17T08:02:24.993 回答
0

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

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

因此，我想您至少必须针对您的问题的这方面使用脚本解决方案，特别是考虑到到目前为止没有任何版本的 IE 支持占位符文本。

于 2011-06-22T18:50:10.903 回答
0

CSS 重置样式总是一个好的开始，因为它们可以帮助您避免头疼。

如果您想消除发光，您可能可以像您所说的那样使用轮廓属性，设置text-shadow:none也可能会有所帮助。

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

于 2011-06-23T14:47:30.917 回答