Forums : Xul, Xbl, JS...

Eh bien c'est simple, tu le style en CSS (propriété border &co pour ton cas).

Attention, dans le theme par défaut, il y a le style -moz-appearance sur la plupart des widgets, qui indique qu'il faut appliquer le design de l'environnement graphique. Il faut mettre sa valeur à none si on veut avoir la main sur tout le design du widget.

Bonjour

J'ai cherché à faire la même chose sans trouver nulle part de solution claire. Après plusieurs essais, je suis arrivé à une solution fonctionnelle. J'ai trouvé beaucoup d'infos dans ces forums et j'espère que ces quelques lignes de plus seront utiles.

Ce que je propose ici permet d'obtenir un comportement de bouton (focus, évènement clavier (action associée déclenchée en plus par touche entrée et pas seulement par clic de souris), navigation par tab ou flèche de direction) sur une image ou sur un label.

code xul

<button class="specialButton" oncommand="alert('Annulation !!');">
   <label value="Annuler"/>
</button>

<button class="specialButton" oncommand="alert('cette image est bien un bouton !!');">
   <image/>
</button>

L'attribut label ou image de la balise <button> utilisé seul créé un petit espace réservé pour l'attribut non utilisé, ce qui peut être un problème (décalage possible pour les alignements).

code css

/* effacement du bouton standard */
.specialButton {
   -moz-appearance: none;
   margin: 0px;
   border: 0px solid white;
   cursor: pointer;
   min-width: 0px;
   min-height: 0px;
}

/* look du label = on redessine un bouton en mettant une bordure au label */
.specialButton label {
   background-color: #ffb875;
   font-size: 13px;
   color: #ff7c18;
   font-weight: bold;
   border: 2px solid #ff744d;
   -moz-border-radius: 7px;
   padding: 5px 10px 5px 10px;
   margin: 0px;
}
/* changement de couleur de la bordure quand le bouton a le focus */
.specialButton:focus label {
   border: 2px solid #ffd61e;
}

/* on définit l'image utilisée pour le bouton avec une image seule */
.specialButton image {
   list-style-image: url('votre_image.png');
}
/* on peut changer l'image quand le bouton-image obtient le focus  */
.specialButton:focus image {
   list-style-image: url('image_quand_focus.png');
}

Vincent

<button label="Test" class="plain" style="-moz-appearance:none; ;background-color:red;" /> ça correspond a ce que tu cherche ? (PS: j'ai pas essayer en mettant une image a la place de la background-color mais ça devrais le faire pareille je pense)

C'est nettement plus simple et ça correspond à peu près ;-) !!

• Il faut quand même rajouter le min-width et min-height à zéro pour que les bords du boutons 'collent' au label ou à l'image.
• il faut créer des règles css pour relooker les bouton (en passant par button{} et pas par .specialButton comme je l'ai fait) pour conserver l'aspect skinnable de l'application.

Ca permet de gagner quelques lignes de code (les margin, padding etautres) !!! Merci