input et Internet Explorer 6/7 : corriger le défilement de l'arrière-plan

Astucecss

Publié par le , mis à jour le (26929 lectures)

css background IE6 bug input

De nombreux formulaires de recherche proposent des champs <input> graphiques, stylés à l&#39;aide d&#39;images d&#39;arrière-plan (propriété CSS background-image).

Par un malheureux hasard, Internet Explorer (jusqu&#39;à sa version 7) présente un bug d&#39;affichage assez curieux : lorsque le terme introduit dans le champ est très long et dépasse la largeur de l&#39;élément, l&#39;arrière-plan défile en même temps que du texte est ajouté.

L&#39;image de fond de l&#39;élément est donc progressivement poussée vers la gauche, ce qui est assez fâcheux visuellement. Voici l&#39;exemple concret de la recherche sur un design d&#39;Alsacréations :

illustration du bug de recherche sur IE 1
Quand le terme recherché est suffisamment court, tout va bien.

illustration du bug de recherche IE 2
Dès que le terme cherché est plus long que le champ, l&#39;arrière-plan est poussé.

Les styles appliqués à cet élément input sont ceux-ci :

#recherche-texte {
  width: 151px;
  height: 22px;
  padding: 5px 0 0 25px;
  background:  url(img/input-search.png) left top no-repeat;
  border: none;
  margin: 0;
  vertical-align: top;
  color: #aaa;
}

Pour corriger de façon efficace ce bug d&#39;affichage sur Internet Explorer, il suffit tout simplement de positionner l&#39;image d&#39;arrière-plan à droite de l&#39;élément input, c&#39;est-à-dire en ajoutant right top dans la déclaration :

#recherche-texte {
  background:  url(img/input-search.png) right top no-repeat;
}

Alternatives

Une autre béquille consiste à appliquer la règle background-attachment: fixed sur le champ, mais cette solution ne corrigera le défaut que sur les navigateurs IE6 et inférieur.

Il est également envisageable de placer l&#39;élément input dans un autre conteneur (ex : div) qui afficherait lui-même l&#39;image de fond, et d&#39;assigner background-color:transparent au champ input.