Skip to content
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

Closed
BHare1985 opened this issue Jun 1, 2017 · 5 comments
Closed

input type=search inconsistencies #685

BHare1985 opened this issue Jun 1, 2017 · 5 comments

Comments

@BHare1985
Copy link

In normalize 7.0.0 there is:

[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

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.

@jonathantneal
Copy link
Contributor

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.

@gouch
Copy link
Contributor

gouch commented Jun 2, 2017

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

@BHare1985
Copy link
Author

@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

@necolas
Copy link
Owner

necolas commented Feb 8, 2018

The cancel button is back. Thanks for the discussion

@Flimm
Copy link

Flimm commented Sep 17, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants