j'ai essayé de changer l'image de fond du bouton d'entrée via css, mais cela ne fonctionne pas.
search.html:
<body>
<form name="myform" class="wrapper">
<input type="text" name="q" onkeyup="showUser()" />
<input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
<p>
<div id="txtHint"></div>
</p>
</form>
</body>
search.css:
.button {
background-image: url ('/image/btn.png') no-repeat;
cursor:pointer;
}
qu'est-ce qui pourrait mal se passer?
même aligner le css n'a pas semblé fonctionner.
Vous devez le taper sans le mot image
.
background: url('/image/btn.png') no-repeat;
Testé dans les deux sens et celui-ci fonctionne.
Exemple:
<html>
<head>
<style type="text/css">
.button{
background: url(/image/btn.png) no-repeat;
cursor:pointer;
border: none;
}
</style>
</head>
<body>
<input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
<input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
<input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
</body>
</html>
Juste pour ajouter aux réponses, je pense que la raison spécifique dans ce cas, en plus du mal placé no-repeat
, est l’espace entre url
et (
:
background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
background-image
prend une URL comme valeur. Utilisez soit
background-image: url ('/image/btn.png');
ou
background: url ('/image/btn.png') no-repeat;
qui est un raccourci pour
background-image: url ('/image/btn.png');
background-repeat: no-repeat;
En outre, vous voudrez peut-être consulter le button
élément HTML pour les boutons de soumission sophistiqués.
S'il s'agit d'un bouton d'envoi, utilisez <input type="image" src="..." ... />
.
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html
Si vous voulez spécifier l'image avec CSS, vous devrez utilisertype="submit"
.