Entrée de recherche HTML5: aucune image d'arrière-plan dans Chrome?

Question

Je me suis arraché les cheveux en essayant d'amener Chrome à styliser mon entrée search avec une image de fond. Firefox n'a aucun problème, mais je crains que ce soit parce qu'il traite l'entrée comme une entrée de texte ordinaire. Est-ce simplement impossible?

Essayez ceci comme une démonstration:

<input type="search" /> 

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

Si cela a fonctionné correctement, il devrait mettre le logo de Google (ou une partie de celui-ci) comme l'image d'arrière-plan pour l'entrée « Recherche ». Mais comme vous le verrez dans Chrome, cela ne fonctionne pas. Des idées, ou est-ce juste une des bizarreries de HTML5? : \

Answer 1

Comme vous l'avez dit, Mozilla traite les entrées de recherche comme du texte. Toutefois, pour les navigateurs Webkit (Chrome, Safari), l'entrée de recherche est appelée comme wrapper HTML créé par le client pour le NSSearchField Webcore Cocoa interne. C'est ce qui lui donne les bords arrondis et le bouton 'x' pour se dégager quand il y a du texte dedans. Malheureusement, il semble que non seulement ces fonctionnalités supplémentaires soient inaccessibles pour le moment par CSS/JS, mais il semble également qu'il n'y ait pas de spécification W3 pour savoir quelles propriétés CSS peuvent être appliquées à cet élément ainsi que d'autres nouveaux éléments HTML5. Jusqu'à ce qu'il y ait une telle spécification, je ne m'attendrais pas à avoir un comportement cohérent.

Answer 2

Vous pouvez obtenir Chrome (et Safari) pour jouer le long de mieux avec vos styles sur un champ de recherche HTML5 (y compris les images d'arrière-plan) si vous appliquez dans votre CSS:

-webkit-apparence: none;

Vous pouvez également changer webkit-box-sizing pour ...

webkit-box-sizing: boîte de contenu;

... car il semble que Webkit le fasse par défaut à la valeur border-box (essentiellement l'ancien modèle de boîte IE5). Attention, il n'y a toujours pas de moyen (apparent) d'avoir un effet sur la position/l'apparence du bouton d'effacement de champs, et puisque seulement Webkit génère ce bouton, vous pouvez trouver de nouveaux inconvénients .

Answer 3

Le bouton d'annulation peuvent être coiffés avec les éléments suivants

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 peut être retiré à l'aide

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

Solution complète pour enlever toute la conception supplémentaire causée par le navigateur. Cela va changer le champ de recherche en champ de saisie normal

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; 
}