Souligner le texte dans un bouton de soumission (html, css)

Question

Je tente (probablement sans raison) de styler un bouton de soumission d'entrée pour qu'il ressemble à un hyperlien normal. En utilisant css tout va bien, sauf pour le soulignement, qui n'est pas rendu. Css:

input.addemail { 
    border: 0px; 
    background-color: #1e2f45; 
    text-decoration: underline; 
    cursor: hand; 
    cursor: pointer; 
    color: #ffd17d; 
} 

Existe-t-il un moyen de souligner le texte (la valeur) d'un bouton d'envoi qui fonctionne x-navigateur? Ou y a-t-il une autre approche - par exemple utiliser une image? Évidemment, je voudrais une bonne garantie que quelle que soit l'approche utilisée, elle fonctionnera x-browser, inc. ie6 :). Ou est-ce juste futile?

Une autre approche serait de cacher le bouton et d'utiliser un lien hypertexte qui, lorsqu'il est cliqué, javascript, soumettre le formulaire. Mais je comprends qu'il peut y avoir des problèmes avec l'utilisateur qui s'attend à être capable de frapper retour, ce qui peut ne pas fonctionner si le bouton est caché.

Toutes les suggestions très appréciées.

Merci

Answer 1

Vous ne pouvez pas utiliser text-decoration pour le bouton, comme alternative, vous pouvez imiter le comportement similaire à la propriété de la frontière comme celui-ci:

border-bottom:1px solid #1e2f45; 

Answer 2

Si vous déplacez le bouton d'envoi off- écran, vous pouvez ensuite utiliser le lien A pour le bouton joliment stylé ainsi que la fonctionnalité "retour presse".

Vous pouvez utiliser différentes astuces CSS, notamment "margin-left: -9999".

Answer 3

J'ai tendance à utiliser un <span> pour simuler un lien hypertexte, et en fait appeler une fonction JavaScript, que vous pourriez bien sûr alors souligner.

Answer 4

J'ai eu le même problème, et après googler, j'ai trouvé une réponse qui fonctionne pour moi

input { 
    text-decoration:underline; 
    display:inline-block; 
} 

La solution avec d'autres exemples appartient à Mike Ballan, ici: here.