web-dev-qa-db-fra.com

Comment puis-je appliquer une image d'arrière-plan à une entrée de texte sans perdre la bordure par défaut dans les navigateurs Firefox et WebKit?

Pour une raison quelconque, la plupart des navigateurs modernes cesseront d'appliquer leur style de bordure d'entrée par défaut aux zones de texte si vous leur donnez une image d'arrière-plan. Au lieu de cela, vous obtenez ce style d'encart laid. D'après ce que je peux dire, il n'y a pas non plus de moyen CSS d'appliquer le style de navigateur par défaut.

IE 8 n'a pas ce problème. Chrome 2 et Firefox 3.5 le font et je suppose que d'autres navigateurs aussi. D'après ce que j'ai lu en ligne IE 7 a le même problème, mais ce post n'a pas 'ai pas de solution.

Voici un exemple:

<html>
<head>
  <style>
    .pictureInput {
      background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
      background-position: 0 1px;
      background-repeat: no-repeat;
    }
  </style>
<body>
  <input type="text" class="pictureInput" />
  <br />
  <br />
  <input type="text">
</body>
</html>

Dans Chrome 2, cela ressemble à ceci: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6

Et dans Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

Mise à jour: Solution JS: J'espère toujours trouver une solution CSS-on-the-input pure, mais voici la solution de contournement que j'utiliserai pour maintenant. Veuillez noter que cela est collé dès la sortie de mon application, il ne s'agit donc pas d'un bel exemple autonome comme ci-dessus. Je viens d'inclure les parties pertinentes de ma grande application Web. Vous devriez pouvoir comprendre l'idée. Le HTML est l'entrée avec la classe "link". La grande position d'arrière-plan vertical est parce que c'est un Sprite. Testé dans IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. J'ai encore besoin de modifier la position d'arrière-plan de quelques pixels dans certains navigateurs:

JS:

 $$('input.link').each(function(el) {
   new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
   if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
 });

CSS:

input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }

Mise à jour: CSS Close Assez Solution: Sur la base de la suggestion de kRON, voici le CSS pour faire correspondre les entrées FF et IE = dans Vista qui fait un bon choix si vous décidez d'abandonner les valeurs par défaut pures et d'appliquer un style. J'ai légèrement modifié le sien et ajouté les effets "bleutés":

CSS:

input[type=text], select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 1px #e3e9ef solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
    border-top: 1px #5794bf solid;
    border-left: 1px #c5daed solid;
    border-right: 1px #b7d5ea solid;
    border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
cssinputborderbackground-image
31
Jade Ohlhauser

Lorsque vous modifiez le style de bordure ou d'arrière-plan sur les entrées de texte, ils reviennent au mode de rendu très basique. Les entrées de texte de style os sont généralement des superpositions (comme Flash) qui sont rendues au-dessus du document.

Je ne pense pas qu'il existe un correctif CSS pur à votre problème. La meilleure chose à faire - à mon avis - est de choisir un style que vous aimez et de l'imiter avec CSS. Ainsi, quel que soit le navigateur dans lequel vous vous trouvez, les entrées seront identiques. Vous pouvez toujours avoir des effets de survol et autres. Les effets de lueur de style OS X peuvent être difficiles, mais je suis sûr que c'est faisable.

@Alex Morales: Votre solution est redondante. bordure: 0; est ignoré en faveur de border: 1px solid # abadb3; et entraîne des octets inutiles transférés à travers le fil.

10
sholsinger

C'est le CSS que j'utilise qui peut fournir le regard par défaut:

input, select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 2px #f1f4f7 solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

Vous pouvez également appliquer :active et donne aux commandes bleuâtre une teinte une fois sélectionnées.

6
Filip Dupanović

Mise à jour!

Ok, voici une solution de contournement qui, je pense, est compatible avec tous les navigateurs. Le seul problème serait que le style par défaut diffère de quelques pixels, ce qui pourrait nécessiter quelques ajustements.

<html>
    <head>
        <style>
            .pictureInput {
                text-indent: 20px;
            }
            .input-wrapper {
                position:relative;
            }
            .img-wrapper {
                position:absolute;
                top:2px;
                left:2px;
            }
        </style>
    </head>
    <body>
        <div class="input-wrapper">
            <div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
            <input type="text" class="pictureInput" />
        </div>
        <br />
        <br />
        <input type="text">
    </body>
</html>

En utilisant le positionnement relatif absolu, vous pouvez rendre le div absolu (contenant l'image) absolu par rapport à son parent que tous les navigateurs que je connais (sans compter les versions sous-IE6, IE6 + sont très bien) peuvent gérer. La mise à l'échelle des utilisateurs peut être un problème, mais c'est comme cela avec les solutions de contournement.

À la hausse, vous n'avez pas du tout à changer les styles de vos entrées (sauf pour le retrait de texte, mais vous le feriez de toute façon j'espère).

À la baisse, ce n'est pas la plus jolie solution de contournement.

Ancien!

Je sais que ce n'est pas ce que vous voulez, mais vous pourriez faire quelque chose comme ça pour au moins rendre toutes les bordures d'entrée cohérentes.

input {
    border-color:#aaa;
    border-width:1px;
}

example image

Je ne l'ai pas essayé dans tous les navigateurs, mais comme vous ne définissez pas le style de bordure, il peut utiliser le style natif mais avec une autre taille (bien que vous puissiez également l'ignorer). Je pense que la clé est de simplement définir la couleur de la bordure à quelque chose afin que tous les champs de saisie utilisent la même couleur de bordure et laissent le reste au navigateur.

2
varl

J'avais une image d'arrière-plan de texte, et cela m'ennuyait aussi. J'ai donc mis un <div> relatif autour du <input>, puis j'ai ajouté l'image absolument positionnée sur le <input>.

Ensuite, bien sûr, j'avais besoin d'un peu plus de Javascript pour masquer l'image si elle était cliquée, ou si l'entrée obtenait le focus par tabulation, ou en cliquant sur les bords de l'image.

Avec un peu de tripotage, cela avait l'air plutôt bien avec IE8, Firefox, Chrome et Opera, mais c'est un truc horrible et ce serait bien si les navigateurs le réparaient.

0
Steve Teale