Cancel search button position in Safari 7

Question

I have input[type=search]and gave him a few padding.
In Safari 7 (at least the mavericks), the cancel search button gets trimmed. How can i fix this?

I tried with a selector ::-webkit-search-cancel-buttonand window size, but no luck.

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

JsFiddle setting:

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 z-indexin input[type="search"]::-webkit-search-cancel-buttonand then setting padding-rightworked for me.

Now it works correctly in Chrome and Safari.

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

Answer 2

, , - :

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

, -webkit-search-cancel-button, jsFiddle , .

Answer 3

. Safari, . , , , , .

- - http://codepen.io/cshold/pen/yNWoNo

, :

• input[type="search"]::-webkit-search-cancel-button Chrome Safari.
• , , position: relative. , .

bugreport.apple.com.