CODEWITHSUNDEEP
htmlcsssafari
Sergio
Sergio

Reputation: 28837

Position of search cancel button in Safari 7

I have a input[type=search] and gave it some padding.
In Safari 7 (mavericks at least) the search cancel button gets cutoff. How can I correct this?

I've been trying with the ::-webkit-search-cancel-button selector and box-sizing, but no luck.

enter image description here

jsFiddle: http://jsfiddle.net/hjtkarLc/

The jsFiddle setup:

CSS

input {
    float: left;
    clear: both;
    margin: 1em;
}
input[type="search"] {
    -webkit-appearance: none;
}
#withPadding {
    padding: 0.7em;
}

HTML

<input type="search" value="I'm ok" />
<input type="search" id="withPadding" value="I'm cutoff" />

Upvotes: 4

Views: 1182

Answers (3)

Cat Gelinas
Cat Gelinas

Reputation: 51

Adding a z-index to the input[type="search"]::-webkit-search-cancel-button and then adjusting the padding-right worked for me.

Now it works properly in Chrome AND Safari.

jsfiddle: http://jsfiddle.net/celeryclub/u8mhs7aj/1/

Upvotes: 5

Carson
Carson

Reputation: 4651

Just ran into the same issue. This has to be a Safari bug, as it's localized to the one browser. Even though the icon is cut off, the click area is where you think the icon should be.

Demo of issue - http://codepen.io/cshold/pen/yNWoNo

Things that don't work:

  • Adding padding to input[type="search"]::-webkit-search-cancel-button scales the icon in Chrome and doesn't have an effect in Safari.
  • Set the same selector as above to position: relative. This visually shows the close button, but the click area isn't over top of the icon.

I've submitted a bug report to bugreport.apple.com.

Upvotes: 1

Gianmarco
Gianmarco

Reputation: 2552

The solution at your problem might be to apply an extra padding only to the cancel button, something like this:

input[type="search"]::-webkit-search-cancel-button{
    padding-right:30px;
}

You said that you tried with -webkit-search-cancel-button, but in your jsFiddle is not implemented, so I gave you this hint.

Upvotes: 1

Related Questions