Muchas gracias por vuestra ayuda.
Reconozco que todavía no he sido capaz de solucionar este problema. He buscado información y códigos pero no se adaptarlos y creo que en este momento estoy bastante perdido por lo que vuelvo a pedir vuestros consejos.
Abajo, pego el código de mi formulario para saber qué pasos he de seguir, gracias:
HTML:
<div id="formu">
<form name="formu" id="formu" method="">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" class="campo" />
<label for="email">E-mail:</label>
<input type="text" id="email" class="campo" />
<label for="comentario">Comentario:</label>
<textarea id="comentario" class="campo"></textarea>
<br />
<input type="submit" id="boton_enviar" name="enviar" value="Enviar" />
</form>
</div>
CSS:
form {
padding: 12px;
background: #62A522;
width: 345px;
height: 330px;
}
label {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
display: block;
margin-left: 12px;
}
.campo {
width: 330px;
height: 30px;
margin-bottom: 14px;
border: 1px Solid #62A522;
background-image: url(images/f3.jpg);
background-repeat: no-repeat;
padding: 2px;
color: #62A522;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #62A522;
margin-left: 8px;
}
#comentario {
width: 330px;
height: 133px;
background-image: url(images/f4.jpg);
background-repeat: no-repeat;
}
#boton_enviar {
width: 88px;
height: 27px;
margin-left: 134px;
border: 1px Solid #62A522;
background-image: url(images/boton.jpg);
text-indent: -9999px;
background-color: #84AA00;
}
.campo:hover {
background-image: url(images/f1.jpg);
}
#comentario:hover {
background-image: url(images/f2.jpg);
}