This is a good find. Well done. A little background for you; this change goes pretty far back.

After normalizing the search input on OS X, the search cancel pseudo-element is not always well positioned and is missing from other UAs.
— Jan 17, 2012

Since that time, it would seem IE has added a “clear” button, which means Chrome, Edge, Internet Explorer, Opera, and Safari all have this functionality, but Firefox still does not. I could not find further discussion from Mozilla beyond this. For these reasons, I would be in favor of removing the normalization.

However, if this change is considered too breaking because it goes back 5 years, I would then recommend also removing ::ms-clear for consistency.

That’s my 2 cents, anyway.

Wow, great research @BHare1985!

For anyone who looks into this and gets confused, realize the search input x is not added unless you actually interact with the form element (I made a codepen if you want to try).

In fact, the behavior is still very different across browsers. After you type text into the search input:

• IE11 and Edge show the x icon only while the search input is focused
• Chrome shows it on focus and hover
• Safari shows it constantly

But Normalize currently turns off this feature in all those browsers.

I'm not sure the specific history of normalize, but I know the reason devs started adding the -webkit-appearance: textfield rule is because Safari (still) radically alters the appearance of search inputs (huge horizontal padding and corner rounding). It was an accepted tradeoff to give up the convenient x feature in exchange for predictable input appearance (and the -webkit- rule meant Safari could be specifically targeted).

But it appears worth revisiting this in 2017: Is it possible yet to fix the search input appearance in Safari without also removing the useful x feature in Safari, Chrome and Edge?

P.S. Edge honors (some?) -webkit- selectors/rules, which is why normalize is breaking this feature in Edge as well

@gouch IE11 and Edge search cancel are not affected by normalize at all in my experience on Windows 10 with Microsoft Edge 40.15063.0.0 and Internet Explorer 11.296.15063.0. The screenshots in my original post indicate how the search looks even with normalize 7.0.0.

I confirmed that its only the [type=search]::-webkit-search-cancel-button that affects the cancel button. So if you simply that off that selector then safari will still look normalized but now with an x. Here is a screenshot of your code pen showing that: http://i.imgur.com/4sEmD8l.jpg

The cancel button is back. Thanks for the discussion

I noticed that Safari on the desktop does display the clear button, but Safari on iOS no longer displays the clear button. It turns out that this is a regression in iOS Safari, see this Stack Overflow question:

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

I hope this helps anyone who was confused as I was.