web-dev-qa-db-fra.com

Comment afficher un bouton de soumission sous forme de lien?

Cela ne fonctionne pas dans IE:

.text-button { background: transparent; 
               text-decoration: none; 
               cursor: pointer; }



<input type="submit" class="text-button" value="vote+"/>

Il affiche un bouton carré.

javascripthtmlcssforms
28
Will Curran

Copié à partir de cela lien vous pouvez faire ressembler votre bouton à un lien -

.submitLink {
  background-color: transparent;
  text-decoration: underline;
  border: none;
  color: blue;
  cursor: pointer;
}
submitLink:focus {
  outline: none;
}
<input type="submit" class="submitLink" value="Submit">
43
Vishal
<form name='test'>
    <a href="javascript:document.forms['test'].submit()">As a link</a>
</form>
11
labue

Je devais préparer une page de redirection de publication et comme ceux-ci dépendent de la soumission de formulaires, je devais placer quelque chose dessus pour les faire fonctionner même si javascript échouait pour une raison quelconque. Si javascript échoue, une ancre pour l'envoi du formulaire ne fonctionnera pas non plus. J'ai dû formater le bouton pour qu'il ressemble à un lien (donc la page de redirection en ressemble à un). J'ai basé ma solution sur ce que Vishal a écrit, mais j'ai fait quelques petites modifications pour la rendre plus belle en ligne. Voici le résultat.

button
{
    padding:0;
    background-color:transparent;
    text-decoration:underline;
    border:none;
    border:0;
    color:blue;
    cursor:pointer;
    font-family:inherit;
    font-size:inherit;
}

button::-moz-focus-inner
{
    border:0;
    padding:0;
}
To complete the redirect <button>click here</button>.

Edit: L'astuce pour supprimer le rembourrage dans FireFox a été tirée de ici

Edit2: le bouton fait hériter le style de police de l'élément parent pour le faire ressembler à un lien valide (auparavant, la taille et la famille de polices étaient différentes pour le bouton).

3
jahu

Essaye ça:

<style type="text/css">
    .text-button 
    { 
        background-color: Transparent;                 
        text-decoration: underline;                 
        color: blue;
        cursor: pointer; 
        border:0
    }    
</style>
<input type="submit" class="text-button" value="vote+"/>
1
Chandu

IMO Je suppose que je suis un développeur difficile à gérer. Je proposerais à la (aux) personne (s) demandant cette application l'option de simplement la laisser rester un bouton?

Avez-vous/ont-ils envisagé ce qui suit?

  1. Est-il préférable, du point de vue de l'interface utilisateur, d'utiliser autre chose qu'un bouton pour soumettre un formulaire?
  2. Si vous optez pour l'approche CSS, je ne pense pas que Safari vous permettra de changer l'apparence d'un bouton.
  3. Si vous utilisez le <a> tag avec du javascript, alors vous avez un formulaire sans bouton d'envoi, ce qui peut causer des maux de tête à l'avenir. Comment détectez-vous votre lien d'envoi depuis vos autres <a> balise facilement?
1
Doug Chamberlain

Je crois que la réponse soumise ci-dessus par mofolo est la solution la plus correcte

Le style CSS des boutons d'envoi pour les faire ressembler à des balises d'ancrage ne traverse PAS le navigateur. Le style text-decoration: underline est ignoré par de nombreux types de navigateurs.

La meilleure méthode dans mon expérience est d'utiliser javascript sur l'événement onclick d'une balise d'ancrage.

Par exemple:

Un lien "Supprimer" sur un écran de formulaire de détails d'utilisateur, avec confirmation avant de soumettre le formulaire avec un identifiant de "userdetails"

<a href="#" onclick="if(confirm('Are you sure you want to delete this user?')){document.forms['userdetails'].submit();}return false;">Delete</a>
1
SyntaxGoonoo

essaye ça:

.text-button {
 border: none;
 background: transparent;
 cursor: pointer }
0
Paul Spencer