How to Remove All Default Webkit Search Field Styling

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

Override the -webkit-search-cancel-button

DEMO

1) Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML

2) for chrome

CSS

Article link

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
  height: 10px;
  width: 10px;
  background: red;
  /* Will place small red box on the right of input (positioning carries over) */

}

Similar Question

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.

---

Related Topics