Fixed Search input has rounded corners in Safari iOS

[refael]

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

 

[Steve F]

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.

 

[Naz]

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;

 

[Adam Howard]

I think it looks better with rounder corners

 

[Mike]

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.

 

[refael]

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.

input[type="search"]
{
    background-image: url(@imagePath/xenforo/clear.png);
}

 

[refael]

While working on a wordpress theme, I noticed they have applied a similar workaround as I suggested above

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 */
}

 

[Mike]

I've applied a clear image to .textCtrl in 1.4. Hopefully that should sort this and any related problems (without triggering any other weird behavior).