18008 sujets

Questions générales et questions de débutants

Modifier l'apparence d'un bouton submit dans un formulaire (résolu)

Bonjour,

Je débute en php et css, je cherche à modifier l'apparence d'un bouton submit d'un formulaire et le remplace par une image .png.

Quand je mets background-image dans le .css, le bouton ne voit pas son apparence modifiée, seul le fond change.

Est-ce que qqn connait une url qui explique cette modification, je n'ai pas trouvé sur le forum.

Merci Smiley lol Smiley confused Smiley ravi
Modifié par Shinchan (29 Mar 2006 - 16:18)
bonjour,
As-tu creusé du côté de ce côté là ?

/*css */
input[type=image] {background:url(tonpng.png);}

<!-- xhtml -->
<input type="image" />
Bonjour,
Nul besoin d'utiliser une background-image en CSS.
Les champs input de type image sont fait pour cela :

<input type="image" alt="Envoyer" width="100" height="30" src="bouton.png" />
Ca marche, mais il y a un décalage en hauteur entre le bouton et les autres éléments du formulaire.

J'essaye donc d'y remédier. Smiley langue

Merci pour vos réponses rapides!
Smiley confused
Modifié par Shinchan (29 Mar 2006 - 13:30)
le xhtml:

<?php require 'connect.php'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Backoffice: login</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="conteneur">
<h1 id="header"><a href="admin.php" title="Backoffice Costadosol"><span>Backoffice Costadosol</span></a></h1>
<div id="login">
<form method="post" action="verifLogin.php">
<label>LOGIN</label>
<input type="text" name="login" />
&nbsp;&nbsp;&nbsp;
<label>MOT DE PASSE</label>
<input type="password" name="password" />
<!--<button id="formulaire" type="submit">Search with Google</button>-->
<input type="image" title="Envoyer" value="envoyer" class="button" src="./images/backoffice/backofficeButton.png" alt="Envoyer" />
</form>
</div>
</div>
</body>
</html>


la css:
body {
background-color: #f4f0e0;
font-family: Arial, Helvetica, sans-serif;
background-image: none;
font-size: medium;
margin: 0px;
}
div#conteneur
{
width: 800px;
margin: 0 auto;
text-align: left;
padding:0;
background-color: #f4f0e0;
}

h1{
padding: 0;
margin: 0;
background: url(../images/backoffice/backofficeTop.png) no-repeat left top;
height: 135px;
}

h1#header a{
width: 800px;
height: 135px;
display: block;
position: relative;
left: 0;
top: 0;
}

h1#header a span {
display:none;
}

#login{
padding: 0;
margin: 0;
background: url(../images/backoffice/backofficeLogin.png) no-repeat left top;
width:800px;
height:40px;
}

#login form{
padding:0 0 0 300px;
margin: 0;
background: transparent none;
width:500px;
height:40px;
}

.button{
padding:6px 0 0 0;
margin:0;
background: transparent none;
}
Modifié par Shinchan (29 Mar 2006 - 15:25)
Sujet clos
Aller à