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

J'ai été en tirant sur mes cheveux à essayer d'obtenir de Chrome à mon style search d'entrée avec une image d'arrière-plan. Firefox n'a pas de problème, mais j'ai peur c'est parce qu'il traite de l'apport régulier de saisie de texte. Est-ce tout simplement pas possible?

Essayer cela 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 Google logo (ou une partie) comme l'image de fond pour la "Recherche" d'entrée. Mais comme vous le verrez lorsque vous regardez cela dans Chrome, elle NE fonctionne PAS. Toutes les idées, ou est-ce juste un de HTML5 bizarreries? :\

source d'informationauteur Jason

  1. 21

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

    -webkit-appearance: none;

    Vous pouvez également modifier -webkit-box-sizing...

    -webkit-box-sizing: content-box;

    ...puisqu'il semble que Webkit par défaut ce à la frontière-zone valeur (en gros le vieux IE5 modèle de boîte).

    Être averti, il n'y a pas encore d' (apparente) de manière à avoir un effet sur la position/l'apparition du champ-de compensation bouton, et depuis seulement Webkit génère ce bouton, vous pouvez trouver quelques nouvelles de la croix-navigateur inconvénients à traiter.

  2. 4

    Solution complète pour supprimer tous les dessins additionnels causés par navigateur. Cela va changer le champ de recherche à la normale champ de saisie 

    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;
}
  3. 1

    Comme vous l'avez dit, Mozilla traite de la recherche des entrées sous forme de texte. Pour Webkit des navigateurs (Chrome, Safari), la recherche d'entrée est considéré comme un client HTML créé wrapper pour l'intérieur de l'Webcore Cacao NSSearchField. C'est ce qui lui donne l'bords arrondis, et le " x " bouton pour effacer lui-même quand il y a du texte à l'intérieur. Malheureusement, il semble que non seulement ces fonctionnalités supplémentaires inaccessibles par CSS/JS pour le moment, mais il semble aussi qu'il n'y a pas de W3 spécification pour quelles propriétés CSS peuvent être appliquées à cet élément ainsi que d'autres nouveaux éléments HTML5. Jusqu'à ce que il ya une telle spécification, je ne m'attends pas à avoir un comportement cohérent.

  4. 1

    Le bouton annuler peut être décoré avec le suivant 

    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) */

}

    Style peut être enlevé à l'aide d' 

    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/