Pour une raison que la plupart des navigateurs modernes vont cesser d'appliquer leur entrée par défaut le style de bordure de zones de texte, si vous leur donnez une image d'arrière-plan. Au lieu de cela, vous obtenez que le laid en médaillon de style. À partir de ce que je peux dire il n'y a pas de CSS façon d'appliquer le navigateur par défaut du style.
IE 8 n'ont pas ce problème. Chrome 2 et Firefox 3.5 et je suppose que les autres navigateurs aussi bien. De ce que j'ai lu en ligne, IE 7 a le même problème, mais que le post n'avez pas une 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: je suis toujours l'espoir de trouver un pur CSS-sur-la-solution de saisie, mais voici la solution que je vais utiliser pour l'instant. Veuillez noter que ceci est collé à droite en sortant de mon application n'est donc pas un gentil, autonome exemple, comme ci-dessus. J'ai juste inclus les parties pertinentes de web app. Vous devriez être en mesure d'obtenir l'idée. Le HTML est de l'entrée avec le "lien" de la classe. La grande verticale de fond, 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 besoin de modifier le fond d'un couple de 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 Assez Proche de la Solution: Basé sur la suggestion de kRON voici le CSS pour faire les entrées match FF et IE sous Vista qui fait un bon choix si vous décidez de renoncer à de pures valeurs par défaut et d'appliquer un style. J'ai modifié légèrement son et ajout de la "bleuâtre" effets:
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; }
