New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
input type=search inconsistencies #685
Comments
This is a good find. Well done. A little background for you; this change goes pretty far back.
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 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:
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 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?) |
@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 |
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: I hope this helps anyone who was confused as I was. |
In normalize 7.0.0 there is:
So in chrome this
turns into this:
However, in IE11 the search cancel exists:
and Edge:
(note: I didn't bother checking firefox, safari, opera, vivaldi, etc)
I am torn if the default should be to uniform all the browsers to not show the search cancel button or to fallback and rely on if the designer purposely put
type=search
then they want this functionality and all that comes with it.It's important to note that this css change does more than fix cross-browser compatibility, it actually removes functionality a designer may actually want. I, for one, was baffled why my search cancel wasn't appearing in chrome and the
webkit-search-cancel-button
styling doesn't appear in dev tools when you inspect an elements styling.The text was updated successfully, but these errors were encountered: