<input type="search"> no longer shows cancel button (x) under iOS

Question

<input type="search">

All online articles indicate that and input with type=search will have a clear button on the right side of the input (on Apple products).

This still works in Safari on MacOS, but in mobile safari (iOS9) this no longer works.

Is there a way to get this search-cancel-button back?

I already tried this:

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

I also tried giving the input a name and value. Also putting it inside a form, but to no avail.

I found a page that added the button using css, but on my iPhone, pressing the button will place the carret inside the button, which is super weird, and unusable.

Solution 1

So let me start with how I got to where I am. First I loaded an input as type="search" in OS X and iOS 9. I saw as you did that it worked on OS X but not iOS. So I started investigating. When I looked under accessibility with no text in the input it only had a single child element. When I typed in text it suddenly had two.

See in the bottom corner under accessibility. When I hover over div:role(button) it highlights the little clear X as you can see above. So then I tested the same thing in iOS and it does indeed do the same thing only when you hover over the same element it doesn't highlight anything. So it is being added by safari in iOS.

Next I started playing with some CSS. My first thought was if its not showing maybe its just a display issue and so I added this.

::-webkit-search-cancel-button {
    height: 10px;
    width: 10px;
    display: inline-block;
    background: blue;
}

Which now got me this in iOS:

So it is there but for some reason on iOS its hidden and not getting any content. Also clicking it is not clearing the search field either once you force it to be visible. I am still messing around with it but right now it seems like they broke it. Intentionally or not I am unsure. For the time being a CSS and JavaScript solution may get you back to where you want to be faster. I will update answer if I find anything else.

EDIT

This is driving me nuts. I searched all their developer documentation for safari and iOS.

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

They still reference it as being supported in above link but those documents have not been updated since 2012 if you look at the revision history and I can't find any newer ones. Blarg. I have tried every combination I can but it just doesn't work. I think its safe to assume, since it shouldn't be this hard to make it work, that they broke or removed it and don't feel it was important enough to mention. Their documentation says to use something like this CSS:

input {
    -webkit-appearance: searchfield;
}

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

At this point like I said roll your own or maybe even file a bug report and maybe we can find out for sure.

Bug reports submitted to Apple:

• AtheistP3ace submitted a bug report to Apple, bug number 24932348.
• Splaktar spoke to Apple developers and they responded and said that there does appear to be a regression since iOS 9. Issue ID 35131989, which was eventually closed for inactivity, and then marked as a duplicate of AtheistP3ace's bug report.

Solution 2

I was able to get it working on iphone using the below css

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">