set the position of the "search cancel" button in an input type = search in Safari 7

Question

set the position of the "search cancel" button in an input type = search in Safari 7

Navigation

#1 by (3 votes)

6

I have input[type=search] with padding . As I want to have the same style in different browsers I used -webkit-appearance: none; but in Safari 7 (mavericks at least) The button that does reset / cancel the search is cut off. How can I fix this?

I have been trying with the ::-webkit-search-cancel-button selector which works for example for econder ( display: none; ) but I can not change it to the left ...

Suggestions?

jsFiddle: link

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 in SOen

html css safari

asked by anonymous 01.11.2014 / 13:47

1 answer

Monitor space in sqlserver datafile How to auto-scroll to the top when viewing the page footer?

score 3 · Accepted Answer

Use ::-webkit-search-cancel-button , make it its absolute position, position:absolute and align with right .

To get his position within input , set the position of the element to relative, position:relative , and determine the limit of the text within input with 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" />