Safari 7中搜索取消按钮的位置

Question

我有一个,input[type=search]并给了它一些padding.
在Safari 7(至少是特立独行者)中,搜索取消按钮被截止.我怎么能纠正这个？

我一直在尝试使用::-webkit-search-cancel-button选择器和盒子大小,但没有运气.

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

jsFiddle设置:

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

添加z-index到input[type="search"]::-webkit-search-cancel-button,然后调整padding-right为我工作.

现在它在Chrome和Safari中正常运行.

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