• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fixed Search input has rounded corners in Safari iOS

rellect

Well-known member
#1
When the search input has focus, it looks like the other inputs.
But when it doesn't in focus, it gets rounded corners. Probably webkit input appearance affect.

Safari iOS7

search.png
 

Steve F

Well-known member
#2
It is webkit-appearance doing that. iOS changes submit buttons and controls to resemble the UI in iOS. Annoying with some custom styles.

webkit-appearance: none;

Does make it look correct though.
 

NixFifty

Well-known member
#3
It is webkit-appearance doing that. iOS changes submit buttons and controls to resemble the UI in iOS. Annoying with some custom styles.

webkit-appearance: none;

Does make it look correct though.
Ah, no wonder my buttons were being weird on iOS. Thanks. JFYI though, it's:

-webkit-appearance: none;
 

Mike

XenForo developer
Staff member
#5
This is actually surprisingly annoying to work out, mostly due to specificity. Note that we already have a -webkit-appearance set for search fields: textfield, which is the common recommendation.

Setting the appearance to none does fix the issue, but technically there's a different appearance as the other controls have the standard textfield appearance. If we set input, textarea to none, that applies to checkboxes (and likely radios) as well, which we don't want. If we take away border-radius on input[type=search], that actually overrides .textCtrl due to higher CSS specificity.

We could look at applying -webkit-appearance: none to .textCtrl, but that is a pretty big change so I'm unsure if it will have any other side effects.
 

rellect

Well-known member
#6
This is actually surprisingly annoying to work out, mostly due to specificity. Note that we already have a -webkit-appearance set for search fields: textfield, which is the common recommendation.

Setting the appearance to none does fix the issue, but technically there's a different appearance as the other controls have the standard textfield appearance. If we set input, textarea to none, that applies to checkboxes (and likely radios) as well, which we don't want. If we take away border-radius on input[type=search], that actually overrides .textCtrl due to higher CSS specificity.

We could look at applying -webkit-appearance: none to .textCtrl, but that is a pretty big change so I'm unsure if it will have any other side effects.
I did few tests of my own, as it was strange to me that it looks fine on focus state but not in blur state.
Found something really bizarre. If you set a background-image, the input does not get the rounded corners.
But the tricky thing is that you can't set the value to none, it must be a url.
HTML:
input[type="search"]
{
    background-image: url(@imagePath/xenforo/clear.png);
}
 

rellect

Well-known member
#7
While working on a wordpress theme, I noticed they have applied a similar workaround as I suggested above
HTML:
input,
textarea {
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */
}