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

StackOverflow https://stackoverflow.com/questions/1100409

Question

Pour une raison quelconque cessent d'être appliqués leur style de bordure d'entrée par défaut des navigateurs les plus modernes aux zones de texte si vous leur donnez une image de fond. Au lieu de cela, vous obtenez ce style laid encart. D'après ce que je peux dire qu'il n'y a aucun moyen de CSS pour appliquer soit le style par défaut du navigateur.

IE 8 n'a pas ce problème. Chrome 2 et Firefox 3.5 font et je suppose que les autres navigateurs aussi bien. D'après ce que j'ai lu en ligne IE 7 a le même problème, mais ce poste n'a 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, il 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: JS Solution: J'espère encore trouver une solution CSS pur-on-the-entrée, mais voici la solution que je vais utiliser pour l'instant. S'il vous plaît noter que ceci est collé juste de mon application est donc pas un stativ seul exemple comme ci-dessus. Je viens inclus les parties pertinentes de ma grande application web. Vous devriez être en mesure d'obtenir l'idée. Le code HTML est l'entrée avec la classe « lien ». La grande position de fond verticale est parce qu'il est un sprite. Testé dans IE6, IE7, IE8 FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. Je dois modifier la position d'arrière-plan un couple de pixels dans certains navigateurs encore:

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 Enough Solution: Basé sur la suggestion de KRON est ici le CSS pour faire les entrées correspondent FF et IE dans Vista qui fait un bon choix si vous décidez de renoncer à leurs valeurs par défaut pures et d'appliquer un style. Je l'ai modifié son peu et a ajouté les effets « bleutées »:

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; }
Était-ce utile?

La solution

Lorsque vous changez la frontière ou le style d'arrière-plan sur les entrées de texte Ils revenir au mode de rendu très basique. entrées de texte qui sont-style os sont généralement superpositions (comme le flash est) qui sont rendus au-dessus du document.

Je ne crois pas qu'il y ait une solution pure CSS à votre problème. La meilleure chose à faire - à mon avis - est de choisir un style que vous aimez et imiter avec CSS. Alors que peu importe le navigateur que vous êtes, les entrées seront les mêmes. Vous pouvez encore avoir des effets de vol stationnaire et similaires. effets lumineux OS de style X peut être difficile, mais je suis sûr que ce qui est faisable.

Morales @ Alex: Votre solution est redondante. border: 0; est ignoré en faveur de la frontière: 1px solid # abadb3; et les résultats en octets inutiles transférés à travers le fil.

Autres conseils

est le CSS que j'utilise qui peut fournir la valeur par défaut regarder en arrière: 

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 donner les commandes blueish teinte une fois qu'ils sont sélectionnés.

Mise à jour!

Ok, voici une solution que je pense est compatible multi-navigateur. La question ne serait que le style par défaut diffère par quelques pixels donc cela pourrait avoir besoin de peaufinage. 

<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 absolu-parent que vous pouvez faire le div absolu (contenant l'image) acte absolu par rapport à son parent que tous les navigateurs que je connais au sujet (sans compter les versions sous-IE6, IE6 + sont très bien) peut gérer. mise à l'échelle de l'utilisateur peut être un problème, mais c'est la façon dont il est avec des solutions de contournement.

A la hausse, vous ne devez pas changer les styles sur vos entrées du tout (sauf text-indent, mais vous feriez que je l'espère en tout cas).

En revanche, ce n'est pas la plus jolie solution de contournement.

Old!

Je sais que ce n'est pas ce que vous voulez, mais vous pouvez faire quelque chose comme ça au moins faire toutes les entrées frontières cohérentes. 

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

Je ne l'ai pas essayé dans tous les navigateurs, mais puisque vous ne définissez pas le style de bordure il pourrait utiliser le style natif mais avec une autre taille (bien que vous pouvez sauter aussi). Je pense que la clé est de mettre juste la frontière de couleur à quelque chose de sorte que tous les champs d'entrée utiliseront la même frontière de couleur et laisser le reste au navigateur.

J'ai eu une image d'arrière-plan du texte, et ce fut aussi ennuyeux moi. Donc, je mets un parent

autour de la et puis ajouté l'image absolument positionné sur .

Alors bien sûr je besoin d'un peu plus Javascript pour cacher l'image si elle a été cliqué, ou si l'entrée a le focus par tabulation, ou en étant cliqué sur les bords de l'image.

Avec un peu de tripoter ça avait l'air assez bien avec IE8, Firefox, Chrome et Opera, mais il est une bidouille horrible et ce serait bien si les navigateurs fixèrent.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top