<input type="search">
所有在线文章都表明input 和type=search 将在输入的右侧有一个清除按钮（在Apple 产品上）。
这在 MacOS 上的 Safari 中仍然有效，但在移动 safari (iOS9) 中不再有效。
有没有办法恢复这个搜索取消按钮？
我已经试过了：
input::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button;}
我还尝试为输入提供name 和value。也将其放在form 中，但无济于事。
我找到了page that added the button using css，但在我的 iPhone 上，按下按钮会将小方块放在按钮内，这非常奇怪，而且无法使用。
【问题讨论】：
我能够使用下面的 css 在 iphone 上运行它
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 14px;
width: 14px;
display: block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
/* setup all the background tweaks for our custom icon */
background-repeat: no-repeat;
/* icon size */
background-size: 14px;
}<input type="search" value="Example">【讨论】：
input[type="search"] 的清除 UX。无论出于何种原因，提供此资产的 Apple 团队都没有，因此如果您给它一个没有图像且没有大小的边框，那么控件就在那里并且显示为一个小点，因此它会折叠。如果有人想支持 Apple 的软件，请随时告诉他们，但我认为他们不会修复它。
所以让我从我如何到达现在的位置开始。首先，我在 OS X 和 iOS 9 中将输入加载为type="search"。我看到你这样做了，它在 OS X 上工作，但在 iOS 上不工作。于是我开始调查。当我查看输入中没有文本的可访问性时，它只有一个子元素。当我输入文本时，它突然有两个。
请参阅无障碍功能下的底角。当我将鼠标悬停在div:role(button) 上时，它会突出显示清晰的小 X，如您在上面看到的。所以然后我在 iOS 中测试了同样的东西，它确实做同样的事情，只有当你将鼠标悬停在同一个元素上时它不会突出任何东西。所以它是由 iOS 中的 safari 添加的。
接下来我开始玩一些 CSS。我的第一个想法是如果它没有显示可能只是一个显示问题，所以我添加了这个。
::-webkit-search-cancel-button {
height: 10px;
width: 10px;
display: inline-block;
background: blue;
}
现在我在 iOS 中得到了这个：
所以它在那里，但由于某种原因在 iOS 上它被隐藏并且没有得到任何内容。一旦您强制它可见，单击它也不会清除搜索字段。我还在搞砸它，但现在看来他们把它弄坏了。有意或无意我不确定。目前，CSS 和 JavaScript 解决方案可能会让您回到您想要更快的地方。如果我发现任何其他内容，我会更新答案。
编辑
这让我发疯了。我在他们所有的开发者文档中搜索了 safari 和 iOS。
他们仍然在上面的链接中引用它作为支持，但是如果您查看修订历史并且我找不到任何更新的文档，这些文档自 2012 年以来尚未更新。布拉格。我已经尝试了所有可能的组合，但它不起作用。我认为可以安全地假设，因为让它工作不应该这么难，所以他们破坏或移除了它，并且觉得它不够重要，值得一提。他们的文档说要使用类似这样的 CSS：
input {
-webkit-appearance: searchfield;
}
*::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
在这一点上，就像我说的，自己动手，或者甚至提交错误报告，也许我们可以确定。
【讨论】：
我认为在 iOS 9 中仅使用 <input type="search"> 是不可能的，你需要做一些“黑客”。
这是JSFIDDLE 的实时示例。
【讨论】：