2011-01-07 7 views

Antwort

40

von diesem link kopiert wurden, können Sie Ihre Taste wie ein Link aussehen -

.submitLink { 
 
    background-color: transparent; 
 
    text-decoration: underline; 
 
    border: none; 
 
    color: blue; 
 
    cursor: pointer; 
 
} 
 
submitLink:focus { 
 
    outline: none; 
 
}
<input type="submit" class="submitLink" value="Submit">

+0

+1 Danke, dass geholfen hat. –

+0

I dieser 'submitLink: focus' sollte '.submitLink: focus' in' CSS' sein, um den Umriss zu entfernen. –

0

try this:

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

dieses Versuchen:

<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+"/> 
+0

Dies könnte ein alter Beitrag sein, aber dennoch - es gibt viele, viele Gründe, warum jemand es wollen würde. Zum Beispiel möchten sie vielleicht ein Formular einreichen, das nicht wirklich wie ein Formular aussieht. Es könnte sein, dass sie es einfach so machen wollen, um die $$ GET-Parameter zu vermeiden. –

9
<form name='test'> 
    <a href="javascript:document.forms['test'].submit()">As a link</a> 
</form> 
+0

mag diesen Trick. – bLaXjack

-2

Sie können das nicht mit der Schaltfläche tun, da Dinge wie Eingabeelemente Elemente des Client-Browsers und der Maschine sind, nicht Ihr CSS-Code.

Sie sollten ein <a href=""></a>-Tag verwenden, das mit einem JavaScript-Snippet verknüpft, das dann das Formular für Sie übermittelt.

+0

Das folgende Beispiel zeigt, dass Sie es tun können, oder gibt es eine Konsequenz davon, dass ich es nicht weiß? Vielen Dank. –

1

IMO Ich denke, ich bin ein schwieriger Entwickler zu behandeln. Ich würde der Person (en) vorschlagen, die diese Anwendung anfordert, die Möglichkeit zu lassen, dass sie nur ein Knopf bleibt?

Haben Sie Folgendes in Betracht gezogen?

  1. Ist es aus Sicht der Benutzeroberfläche empfehlenswert, etwas anderes als eine Schaltfläche zu verwenden, um ein Formular zu senden?
  2. Wenn Sie mit dem CSS-Ansatz gehen, glaube ich nicht, dass Safari Ihnen erlauben wird, zum Aussehen eines Knopfes zu wechseln.
  3. Wenn Sie den Tag <a> mit etwas Javascript verwenden, dann haben Sie ein Formular ohne Senden Schaltfläche, die in der Zukunft Kopfschmerzen verursachen kann. Wie können Sie Ihren Link zum Senden von Ihren anderen <a> Tags leicht erkennen?
1

Ich glaube, die Antwort oben Mofolo eingereicht ist die richtigere Lösung

CSS Styling Tasten einreichen, damit sie wie Anker-Tags aussehen nicht Cross-Browser. Der text-decoration: Unterstreichungsstil wird von vielen Browsertypen ignoriert.

Die beste Methode in meiner Erfahrung ist es, Javascript auf einem onclick Ereignis eines Anchor-Tags zu verwenden.

Zum Beispiel:

A Link „Löschen“ auf einem Benutzerdetails Bildschirm bilden, mit einer Bestätigung, bevor das Formular mit der ID „Userdetails“ Absenden

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

Ich brauchte einen Beitrag Umleitung vorzubereiten Seite und da diese sich auf das Einreichen von Formularen verlassen, musste ich etwas auf sie legen, damit sie funktionieren, selbst wenn Javascript aus irgendeinem Grund fehlgeschlagen ist. Wenn Javascript fehlschlägt, funktioniert auch kein Anker zum Übermitteln des Formulars. Ich musste den Button eigentlich so formatieren, dass er wie ein Link aussieht (so sieht die Weiterleitungsseite wie eine aus). Ich habe meine Lösung darauf basiert, was Vishal geschrieben hat, aber ich habe ein paar kleine Änderungen vorgenommen, damit es besser inline aussieht. Hier ist das Ergebnis.

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: Der Trick Polsterung in FireFox zum Entfernen wurde von here genommen

Edit2: Aus Taste vererben Schriftstil von Eltern-Elemente, um es wie ein gültiger Link aussieht (früher Schriftgröße und Schriftfamilie waren für die Schaltfläche unterschiedlich).

Verwandte Themen