webkit_WebKit中的方形搜索框

最新推荐文章于 2026-06-20 16:10:19 发布

翻译最新推荐文章于 2026-06-20 16:10:19 发布 · 213 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://davidwalsh.name/textfield

标签

#java #python #css #vue #html

#ViewUI

收录于

本文介绍了一种技巧，使HTML5中的input[type=search]元素在WebKit浏览器中看起来更像标准文本输入框，这对于想要自定义搜索框样式，如添加边框的开发者尤其有用。

webkit

The new INPUT type of search is a nice semantic addition given to us under the HTML5 label. Unfortunately this element isn't ultra-stylable within WebKit. Here's a quick trick I've found to make input[type=search] elements look like their basic text counterparts:

新的INPUT搜索类型是HTML5标签下给我们提供的一种很好的语义添加。不幸的是，此元素在WebKit中不是超级样式。我发现了一个快速技巧，可以使input[type=search]元素看起来像其基本文本副本：


input[type=search] {
	-webkit-appearance: textfield;
}

Using -webkit-appearance: textfield allows developers to use input[type=search] elements that appear as a standard square INPUT. This is especially useful when looking to add a border to your INPUT element!

使用-webkit-appearance: textfield允许开发人员使用显示为标准方形INPUT input[type=search]元素。当您希望在INPUT元素上添加边框时，这特别有用！