1. 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

Discussion in 'Resolved Bug Reports' started by rellect, Apr 21, 2014.

  1. rellect

    rellect Well-Known Member

    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

  2. Steve F

    Steve F Well-Known Member

    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.
  3. NixFifty

    NixFifty Well-Known Member

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

    -webkit-appearance: none;
    Steve F likes this.
  4. Adam Howard

    Adam Howard Well-Known Member

    I think it looks better with rounder corners :)
  5. Mike

    Mike XenForo Developer Staff Member

    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.
  6. rellect

    rellect Well-Known Member

    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.
        background-image: url(@imagePath/xenforo/clear.png);
  7. rellect

    rellect Well-Known Member

    While working on a wordpress theme, I noticed they have applied a similar workaround as I suggested above
    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 */
  8. Mike

    Mike XenForo Developer Staff Member

    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).

Share This Page