Un beau bouton submit avec CSS
Posté par jbj le 16 nov 2007 dans (x)HTML/CSS • 13 commentairesStyler un bouton submit n'est pas toujours évident: Comme souvent avec les styles CSS, si l'on souhaite assurer une compatibilité cross-browser avec IE6, il faut prendre son mal en patience.
J'ai eu l'occasion d'étudier diverses techniques à ce sujet, voici celle qui me semble la meilleure.
Pour commencer, une bonne base
Déja, la première chose à savoir est qu'Internet Explorer 6 ne gere pas ce type de codage css, pourtant bien pratique:
input[type="submit"]{...}
Pour contrer ce problème, il suffit d'ajouter une classe à chaque submit que l'on voudra styler. Ce qui nous donne, en html:
<input type="submit" value="ok" id="valider" class="submit" />
Le principe de la classe CSS submit est simple: Nous allons enlever les bordures définies par défauts par les browsers sur les boutons submit et affecter une image de fond de notre choix. Il ne faudra pas non plus oublier de préciser la longueur et largeur de l'image afin qu'elle ne soit pas tronquée:
.submit{
border:none;
color:#fff;
background: transparent url('images/monimage.png') no-repeat top left;
width:75px;
height:20px;
}
Pour aller plus loin
Il erait fort tentant de vouloir ajouter un effet de type rollover au survol du bouton, malheureusement, encore une fois le navigateur de Micro$oft va mettre des barrières à notre créativité: Il ne gère pas la pseudo classe :hover sur un autre élément qu'un lien.
Il existe toutefois plusieurs solutions plus ou moins propres qui tentent de pallier à ce problème. La moins cracra à mon gout consiste à entourer le bouton d'un lien hypertexte comme dans l'exemple proposé ci-dessous:
<a href="javascript:void(0)"> <input type="submit" id="valider" class="submit" value="ok" /> </a>
Dans la feuille de style, il faudra mettre:
a:hover input.submit {
cursor:pointer;
background-image: url('images/secondeimage.png');
}
Ce même effet peut facilement être implémenté avec un peu de javascript. Ici nous appellons la fonction rollover au survol du bouton.
<input type="submit" id="valider" class="submit" value="ok" onmouseover="rollover();"/>
La fonction Javascript rollover se chargera de modifier l'image de fond:
function rollover(){
document.getElementById('valider').style.backgroundImage = 'url(images/secondeimage.png)';
}
Bien entendu, il ne faudra pas oublier de replacer la première image lorsque le curseur ne survolera plus le bouton!
Une autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que cette méthode n'est pas valide CSS. Comme (trop) souvent, avec IE, les développeurs se voient obligés de choisir entre fonctionnalité et respect des standards...
Un beau bouton submit avec CSS…
Styler un bouton submit nest pas toujours vident: Comme souvent avec les styles CSS, si lon souhaite assurrer une compatibilit cross-browser avec IE6, il faut prendre son mal en patience.
Jai eu loccasion dtudier diverses techniques ce sujet, voici c…
Salut,
Bon c’est carrement pas valid comme méthode (input dans un lien…), et puis ta technique pour mettre une image ne marche pas sur Mac. Mieux vaut mettre un input type image et puis si vraiment il faut un rollover alors un peu de javascript…
Chussss.
Salut,
Tu noteras que je n’ai absolument pas dit que de mettre un input dans un lien était une méthode valide. Malheureusement, les lacunes d’IE6 forcent bien souvent à choisir entre codage propre et fonctionnalité.
Ensuite, quand à la technique en elle même, je viens de revérifier au cas ou sur mon mac, et elle marche sans problème, tant sous Firefox que sous Safari.
salut,
pour ma part, je ne suis pas très chaud à propos d’entourer un input par un lien.
carrément pas chaud non plus. Pour te paraphraser, il faut parfois choisir entre du bidouillage horrible et … mettre un peu de javascript. Et plus que le fait d’avoir un code « propre », il faut surtout essayer d’en avoir un accessible. Mais là un input dans un lien, c’est vrai a tomber par terre…
Et puis Javascript n’est pas le supo de satan, du moment qu’il n’est pas intrusif. Et dans ce cas, il ne l’est pas du tout… Si javascript est désactivé, l’internaute ne vera pas l’effet rollover, mais je pense qu’il y survivra.
En ce qui me concerne, j’aime bien la solution de a qui entoure le input, je le ferais un peu différemment ceci-dit…
Mais plutôt que de mette javascript:void(); autant mettre submitForm(); une fonction à définir dans l’entête dont le but affiché est de faire un submit !… mais qui ne servira sans doute jamais…
Pour moi, le seul but de placer un input submit plutôt qu’un simple texte c’est d’avoir la validation du formulaire lorsqu’un champs est validé par un retour clavier (entrée quoi)…
[code]
puis :
a {
background-image: url('images/image.png');
}
a:hover {
background-image: url('images/secondeimage.png');
}
a span { display:none; }
[/code]
Zut le html n’est pas passé…
Le voici :
<a href="javascript:submitForm();"><span><input type="submit" /></span></a>
Qu’en pensez-vous ? mieux ou pire ?
Ni pire ni mieux.
Sémantiquement, placer un submit dans un lien est totalement absurde … d’autant plus si c’est juste pour obtenir un effet de rollover sur un navigateur de plus en plus obsolète.
Faut vraiment avoir envie de perdre du temps et de la cohérence pour pas grand chose.
Après chacun ses priorités, mais entre fournir un code relativement propre et contenter des utilisateurs minoritaires qui, au final, gagneraient plus à passer sur des navigateurs plus performants …
D’accord avec toi à 100%. Le seul problème c’est que quand tu es salarié, c’est ton boss qui décide et pas toi…Si ça ne tenais qu’a moi je n’assurerais qu’une semi-compatibillité avec ie6, comme c’est le cas de ce blog par exemple.
Oui c’est tout à fait pertinent comme remarque … hélas les boss ne font pas toujours des choix très judicieux (et montrent par la même qu’ils sont un peu à côté de la plaque).
On ne te blâmera pas pour cela, mais en publiant un tutoriel à ce sujet, tu tentes le diable
Allez courage, dans peu de temps on en sera totalement débarrassé de cette sa@#&é d’IE6.
Le mieux est de mettre value= » » surtout pour les images transparente
Tchao
Hmm, pourquoi pas ? Laissons l’utilisateur choisir s’il aime la bidouille ou pas.
Personnellement je ne vois pas ce qu’il y a de cracra à mettre un input dans un lien. Si ça fonctionne c’est le principal. Il ne faut pas oublié que l’informaticien est là au service des utilisateurs et non pas l’inverse, les « pseudos » normes sont secondaires, le but étant de respecter le cahier des charges et les contraintes de l’environnement du S.I. L’utilisateur se moquent royalement de la manière dont fonctionne tel ou tel bouton ou autre, la seule chose qui l’interesse et qui compte c’est qu’il fonctionne comme il le souhaitait. Mieux vaut un code « hors norme » et qui soit performant plutot que le contraire. Nous venons de jeter à la poubelle à progiciel de 12Millions d’euros fait par une grande société avec toute les normes en vigueur pour en refaire un nous même et qui colle au micron près aux souhait des utilisateurs.
Alors les normes ça ma fait bien rire…… pensez aux utilisateurs avant de penser à votre petit nombril…