HTML5 Input di ricerca: nessuna immagine di sfondo in Chrome?

Question

Mi sono tirato fuori i capelli cercando di convincere Chrome a modellare il mio input search con un'immagine di sfondo. Firefox non ha alcun problema, ma temo sia perché considera l'input come un normale input di testo. È semplicemente impossibile?

Prova questa come una demo:

<input type="search" /> 

​input[type="search"] { 
background: transparent 
    url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0; 
}​​​​​​ 

Se ha funzionato correttamente, dovrebbe mettere il logo di Google (o parte di esso), come l'immagine di sfondo per l'ingresso "Cerca". Ma come vedrai quando guardi questo in Chrome, NON FUNZIONA. Qualche idea o questa è solo una delle stranezze di HTML5? : \

Answer 1

Come hai detto tu, Mozilla tratta gli input di ricerca come testo. Tuttavia, per i browser Webkit (Chrome, Safari), l'input di ricerca è impostato come un wrapper HTML creato dal cliente per il Webcore Cocoa NSSearchField interno. Questo è ciò che gli dà i bordi arrotondati e il pulsante 'x' per cancellare se stesso quando c'è del testo al suo interno. Sfortunatamente sembra che non solo queste funzionalità extra siano inaccessibili per il momento da CSS/JS, ma sembra anche che non ci siano specifiche W3 per quali proprietà CSS possano essere applicate a questo elemento così come ad altri nuovi elementi HTML5. Fino a quando non ci sarà una tale specifica non mi aspetterei di avere un comportamento coerente.

Answer 2

è possibile ottenere Chrome (e Safari) a giocare meglio con i vostri stili in un campo di ricerca HTML5 (incluse le immagini di sfondo) se si applica questo nel vostro CSS:

-webkit-aspetto: none;

Si consiglia inoltre di cambiare -webkit-box-sizing a ...

-webkit-box-sizing: contenuti-box;

... poiché sembra che Webkit lo imposti automaticamente sul valore del riquadro di confine (in pratica il vecchio modello di box IE5).

Attenzione, non c'è ancora modo (apparente) di avere alcun effetto sulla posizione/aspetto del pulsante di cancellazione campo, e dal momento che solo Webkit genera quel pulsante, è possibile trovare alcuni nuovi fastidi tra i browser da gestire .

Answer 3

Il pulsante di annullamento può essere designato con la seguente

input[type="search"]::-webkit-search-cancel-button { 

    /* Remove default */ 
    -webkit-appearance: none; 

    /* Now your own custom styles */ 
    height: 10px; 
    width: 10px; 
    background: red; 
    /* Will place small red box on the right of input (positioning carries over) */ 

} 

Styling può essere rimosso utilizzando

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
} 

http://css-tricks.com/7261-webkit-html5-search-inputs/

Answer 4

Soluzione completa per rimuovere tutto il design in più causata dal browser. Questo cambierà il campo di ricerca nel campo di input normale

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
} 
input[type="search"]{ 
    -webkit-appearance: none; 
    -webkit-box-sizing: content-box; 
    outline:none; 
}