configure "search Cancel" button position in input type=search in Safari 7

Question

I have a input[type=search] with padding. How I want to have the same style in different browsers I used -webkit-appearance: none; but in Safari 7 (Vericks at least) the reset/reset button of the search gets cut. How can I fix this?

I’ve been trying with the dial ::-webkit-search-cancel-button which works for example for the econder (display: none;) but I can’t turn it left anymore...

Suggestions?

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

_{I asked the same question on Soen}

Answer 1

Use the ::-webkit-search-cancel-button, turn his position into absolute, position:absolute and align with the right.

To get his position inside the input, define the position of the element as relative, position:relative and set the text limit within the input with the padding-right.

input {
    float: left;
    clear: both;
    margin: 1em;
}
input[type="search"] {
    position:relative;
    padding-right: 30px;
    -webkit-appearance: none;
}

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    input[type="search"] {
        position:relative;
        padding-right: 30px;
    }

    ::-webkit-search-cancel-button {   
        right: 10px;
        position:absolute;
    }
}
 
   
#withPadding {
    padding: 0.7em;
}

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