<input type =“search”/>不再显示iOS下的取消按钮（x）

Question

<input type="search">

所有在线文章都表明，input与type=search的输入右侧会有一个清晰的按钮（在Apple产品上）。

这仍然可以在MacOS上的Safari中使用，但在移动游猎（iOS9）中，这不再适用。

有没有办法让这个搜索取消按钮回来？

我已经尝试过了：

input::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button;}

我也试过给输入name和value。也把它放在form内，但无济于事。

我找到了page that added the button using css，但是在我的iPhone上，按下按钮会将卡雷放在按钮内，这非常奇怪，无法使用。

Answer 1

让我先谈谈我如何到达自己的位置。首先我在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。

https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/(null)-SW1

他们仍然将其引用为上述链接中的支持，但是如果您查看修订历史记录并且我找不到任何新版本，那么这些文档自2012年以来就没有更新过。 Blarg。我尝试了所有可能的组合，但它只是不起作用。我认为可以安全地假设，因为它不应该让它变得有效，它们会破坏或删除它，并且不会觉得它很重要。他们的文档说使用类似CSS的东西：

input {
    -webkit-appearance: searchfield;
}

*::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

就像我说的那样滚动你自己或甚至提交错误报告，也许我们可以确定。

Answer 2

我可以使用以下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;

}

Answer 3

我认为在iOS 9中只有<input type="search">是可能的，你需要做一些＆＃34;黑客攻击＆＃34;。

这里有JSFIDDLE个实例。