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

Question

<input type="search">

所有网上的文章表示,并input以type=search将对输入的右侧清晰按钮(苹果食品).

这仍然适用于MacOS上的Safari,但在移动游猎(iOS9)中,这已不再适用.

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

我已经尝试过了:

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

我也试过给输入a name和value.也把它放在里面form,但无济于事.

我找到了一个使用css添加按钮的页面,但在我的iPhone上,按下按钮会将carret放在按钮内,这非常奇怪,无法使用.

Answer 1

那么让我先谈谈我如何到达自己的位置.首先,我type="search"在OS X和iOS 9中加载了一个输入.我看到你在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;

}

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