Editing Input Type="Search" Pseudo-Element Button ('X')

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

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.

Remove IE10's clear field X button on certain inputs?

Style the ::-ms-clear pseudo-element for the box:

.someinput::-ms-clear {
    display: none;
}

Styling an input type= file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Clear icon inside input text

Add a type="search" to your input

The support is pretty decent but will not work in IE<10

<input type="search">

input[type="search"]::-webkit-search-cancel-button {
    opacity: 1 !important;
}

input[type="search"] {
  border: 1px solid gray;
  padding: .2em .4em;
  border-radius: .2em;
}

input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  margin-left: .5em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  display: none;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  display: block;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

<input type="search" placeholder="search" class="light">
<input type="search" placeholder="search" class="dark">

$(".mystyle").after("add your smiley here");