Changer graphisme boutons de formulaire

Bonjour à tous,

J'ai des boutons de formulaire standard (<input type=button>) et je cherche a savoir si on peut les modifier, histoire que ce ne soit pas les très moche boutons windows, mais des boutons avec un fond de couleur différent, une bordure, etc .... Est ce possible ?

Merci d'avance

Hello! Essaie avec la configuration graphique de php qui est beaucoup plus souple

Bonjour,
Oui bien sûr c'est possible

exemple:

input {
	padding: 2px 3px 4px 3px;
	background: #333 url(ton image de fond) repeat-x;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	-moz-border-radius: 5px;
}

Hello !
sur un de mes sites, j'ai modifié avec les css, l'apparence du bouton (par contre je n'ai pas essayé de remplacer le bouton par une image, mais à mon avis c'est le même principe (background-image ?)

la css :

#sub   {width:80px;
		height : 15px;
		padding : none;
		font-size : 0.7em;
		color : #cc6699;
		border : 1px dashed #cc6699;
		margin : none;} /*pour le bouton submit*/

le html :

<input id=sub type="submit" name="Submit" value="OK">
<input id=sub type="reset" name="Submit2" value="Effacer">

et ca donne ca :


Si j'ai pu te renseigner ?

A+

Eh, Hermann, on a répondu en même temps !

Donc, ça repond à ma question, pour remplacer le bouton par l'image, Merci !

Oui, merci !

(des fois, je code un peu trop vite.... mais il faut dire que ce site-là, je l'avais fait très vite !!)

Super, ca marche !!!

Mais en soit ... je comprend pas pourquoi ca marche ...

Ou plutot pourquoi ca marche que pour les boutons et pas pour les zones de texte par exemple !!
Je vois nul part sur ton code css un endroit ou tu dis que ca ne s'applique qu'aux boutons. Et pourtant, la classe que tu surcharges, c la classe INPUT, qui comprend donc <input type=text> et <input type=button> ...

Merci pour l'éclaircissement !

Edit : ah ben d'ailleurs, non ... Ca modifie bien tous les input, et notammenet l'input type text, ce que je ne veux pas ...
Modifié par muaddib (27 Feb 2006 - 19:08)

A ma connaissance il n'y a pas de moyen de différencier les type d'input mais cela ne pause pas de problème puiqu'ils ont tous un id en xhtml.
Tu peux donc attribuer un style aux input individuellement.
Exemple pour les boutons:

input#send, input#reset {
	padding: 2px 3px 4px 3px;
	background: #DEDEE5 url(...) repeat-x;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	-moz-border-radius: 5px;
}

Modifié par Hermann (27 Feb 2006 - 20:48)

Hermann a écrit :
A ma connaissance il n'y a pas de moyen de différencier les type d'input mais cela ne pause pas de problème puiqu'ils ont tous un id en xhtml.

Si si, il y a moyen :

input[type=text] {mes propriétés}
input[type=button] {mes propriétés}

Cf
http://www.yoyodesign.org/doc/w3c/css2/selector.html#attribute-selectors

Bien sûr ça n'ira pas pour IE, mais ça y'avait presque pas besoin de le dire (tout le monde a vu W3C et CSS2 dans le lien...)

Si votre objectif est de remplacer un bouton par une simple image, rappelons au passage qu'il existe <input type="image" />

IL est également possible, pour avoir moins de problèmes avec IE au niveau des CSS, d'utiliser l'élément <button> au lieu de <input type="submit" />.

Ah ben oui! Je ne suis pas allé cherché assez loin dans ma mémoire, j'avais déjà survolé le problème. Merci pour cette précision Mr pop
Décidemment cet IE est vraiment trop restrictif!

Ouais ben si c'est pour que ca marche pas sous ie, c pas la peine ... C'est dommage parce que ca me plaisait bien ...

Bon ben je vais mettre un id à chacun de mes input, ca fait un peu plus de boulot, parce qu'il faut reprendre toutesles pages, mais je prefere etre comaptible à 100% .... Enfin à 99,9 % ....


En tout cas, merci à tous pour votre précieuse aide !!!