random firefox gripe - no X to clear on input="search"

I really try to stick with Firefox; with so many other browsers going down the webkit route I think it's healthy to support an alternative.

But chrome and safari have a convenience function that's great... if you have 

<input type="search">

You get a something like

It's great... it's only there on :hover or :focus and when there's content in the box and for a search or filter it's super convenient. 

Here's a codepen that does it for stuff including Firefox... no js needed, but a kind of annoying amount of non-semantic markup and CSS. I can't figure out if it's being seen as a bug or as a non-standard feature they won't enable by default...

It's frustrating though. It's such a nifty quality of life feature, there's not a lot of downside that I can see...