<input type="search"> 在 iOS 下不再显示取消按钮 (x)

Question

<input type="search">

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

这在 MacOS 上的 Safari 中仍然有效，但在移动版 Safari (iOS9) 中不再有效。

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

我已经尝试过这个：

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

我还尝试给输入一个 name 和 value 。也将它放在 form 中，但无济于事。

我找到了一个 使用 css 添加按钮的页面，但在我的 iPhone 上，按下按钮会将小车放在按钮内，这非常奇怪，而且无法使用。

原文由 Gerben 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 年以来就没有更新过。布拉格。我已经尝试了所有可能的组合，但就是行不通。我认为可以安全地假设，因为让它工作不应该这么难，他们破坏或移除了它并且不觉得它重要到足以提及。他们的文档说要使用类似这样的 CSS：

 input {
    -webkit-appearance: searchfield;
}

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

在这一点上，就像我说的那样，自己动手，甚至提交错误报告，也许我们可以确定地找到答案。

提交给 Apple 的错误报告：

• AtheistP3ace 向 Apple 提交了错误报告，错误编号为 24932348。
• Splaktar 与 Apple 开发人员交谈，他们回应说自 iOS 9 以来确实出现了倒退。问题 ID 35131989，最终因不活动而关闭，然后标记为 AtheistP3ace 的错误报告的副本。

原文由 AtheistP3ace 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;

}

 <input type="search" value="Example">

原文由 mayur patki 发布，翻译遵循 CC BY-SA 4.0 许可协议