Problème de style avec un <button>
Résolu
Bonjour,
donc voilà je souhaite créer un bouton cliquable avec les balises <button></button>
Je m'exécute donc après avoir trouvé cette petite astuce :
<button class="button_smiley" onClick="remplir(this.form,':big_smile:')" type="button">
<img class="smiley" src="images/smileys/big_smile.jpg" />
</button>
Le problème c'est que j'ai encore "des restes" du style par défaut du button (qui varient selon les navigateurs).
J'essaye donc de corriger avec un CSS :
.button_smiley { border : none; background : none; }
.smiley { display : inline; height : 25px; width : 25px; }
Le background-none fait son effet, plus d'arrière plan mais il reste encore des espèces de marges (j'ai bien sûr essayé de mettre les marges à 0)...
Je voulais savoir si quelqu'un avait été confronté à ce problème et si il avait trouvé la parade?
Quelqu'un sait comment annuler complètement le style par défaut des <button>?
(Je ne souhaite pas d'autres solutions du style un input type="image" ou autres).
Cordialement
donc voilà je souhaite créer un bouton cliquable avec les balises <button></button>
Je m'exécute donc après avoir trouvé cette petite astuce :
<button class="button_smiley" onClick="remplir(this.form,':big_smile:')" type="button">
<img class="smiley" src="images/smileys/big_smile.jpg" />
</button>
Le problème c'est que j'ai encore "des restes" du style par défaut du button (qui varient selon les navigateurs).
J'essaye donc de corriger avec un CSS :
.button_smiley { border : none; background : none; }
.smiley { display : inline; height : 25px; width : 25px; }
Le background-none fait son effet, plus d'arrière plan mais il reste encore des espèces de marges (j'ai bien sûr essayé de mettre les marges à 0)...
Je voulais savoir si quelqu'un avait été confronté à ce problème et si il avait trouvé la parade?
Quelqu'un sait comment annuler complètement le style par défaut des <button>?
(Je ne souhaite pas d'autres solutions du style un input type="image" ou autres).
Cordialement
Configuration: Windows XP Safari 532.0
8 réponses
-
Je t'ai fais un exemple ici.
-
Je te déconseil d'utiliser la balise <button> : utilises plutôt <input type="button" value="Texte" /> ou <input type="image" src="image.png" />
Edit: Désolé, je ne t'avais pas lu entièrement mais pourquoi “Je ne souhaite pas d'autres solutions du style un input type="image" ou autres” ? -
Je ne veux pas de type="image" car je ne veux pas envoyer de données au serveur simplement exécuter du JS via onclick.
<input type="button" /> pourquoi pas si t'as quelque chose à me proposer pour mettre une image à la place :p
Et je ne veux pas non plus de simple img ou encore div car je ne peux plus utiliser this.form dans l'appel de ma fonction js.
Merci de ta réponse. -
Je ne veux pas de type="image" car je ne veux pas envoyer de données au serveur simplement exécuter du JS via onclick.
Et avec un "return false;" ? -
C'est à dire? Je ne comprends pas le but de cette manœuvre.
-
Dans la fonction que tu appelles lors du "onclick", ajoutes "return false;" à la fin.
Ça aura pour effet d'annuler les évènements qui suivent le clique (càd l'envoie du formulaire).
N'oublie pas de rajouter : onclick="return fonction();" -
J'ai essayé ça ne fonctionne pas, rafraichissement de la page tout ça...
Ça serait plus un problème de css en fait j'ai l'impression, je tiens à préciser que les boutons fonctionnent nickel sous IE7... -
Ah ben ouais ça fonctionne, j'ai rien modifié en plus depuis tout à l'heure...
Je te remercie beaucoup d'avoir pris le temps de m'aider. ;)
Topic résolu.
