Position of search cancel button in Safari 7

Question

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.

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" />

Answer 1

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/

Answer 2

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.