6

Tenho um input[type=search] com padding. Como quero ter o mesmo estilo em browsers diferentes usei -webkit-appearance: none; mas no Safari 7 (mavericks pelo menos) O botão que faz reset/cancel da busca fica cortado. Como posso corrigir isto?

Tenho estado a tentar com o seletor ::-webkit-search-cancel-button que funciona por exemplo para o econder (display: none;) mas não o consigo mudar mais para a esquerda...

Sugestões?

enter image description here

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

O setup do 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" />

Coloquei a mesma pergunta no SOen

1 Resposta 1

3

Utilize o ::-webkit-search-cancel-button, transforme a posição dele em absoluto, position:absolute e realize o alinhamento com o right.

Para ter a posição dele dentro do input, defina a posição do elemento como relativo, position:relative e determine o limite do texto dentro do input com o 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" />

1
  • Muito interessante! Curiosamente quando carrego no x vejo que o cursor não muda para carregar, como se a imagem e a zona do ecrã que aceita clic na x está desfazada. Mas ajustando para right: 0px; funcionou bem. Obrigado!
    – Sergio
    Commented 9/12/2014 às 20:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .