html Submit-Button versinkt nicht sichtbar, wenn sie gedrückt, wenn Randmenge ist

Question

Ich habe schön HTML-Formular Buttons entworfen (für input type = "submit"). Aber ich merke, dass sie nicht mehr Spüle, wenn sie gedrückt. Normalerweise ist es kein Problem, da die Taste sofort zur nächsten Seite gelangen. Und auf Firefox ist es ein wenig sichtbar, weil ein gepunkteter Umriss den Text der Schaltfläche erscheint um. Aber ein Benutzer versuchte, ein großes Bild auf Safari zu laden und es war nicht klar, dass die Taste gedrückt worden ist, oder das Bild hochgeladen wurde.

Also, was ist der beste Weg, eine haben, stilisiert mit einer schönen Grenze vorlegen, dass es sehr klar macht, wenn sie gedrückt wird? Ich kann verwenden Javascript zu erkennen, drücken und unpressing und die Klasse entsprechend ändern, aber ich denke, ich hoffe, es ist ein einfacher Standard-Weg, dies zu tun? Wenn nicht, gibt es eine gute jQuery-Bibliothek damit umgehen?

Hier ist, was ich spreche: http://jsfiddle.net/gctJq/

gefunden Gerade die jQuery UI-Taste Widget! Denke, das ist das, was ich suchte, wenn es nicht eine einfache Standard-HTML-Lösung. Ich jQuery UI bereits für andere Elemente verwenden, fragen sich, wie schwierig es sein wird, diese gestalten Tasten in allen Größen und Farben zu bekommen .. es scheint 1 Standardgröße und Farbe mehr geeignet zu sein.

Answer 1

verwenden Sie das: aktiv Selektor

sehen sie in Aktion hier

http://jsfiddle.net/gctJq/1/

erwähnenswert ist, dass es in allen modernen Browsern arbeiten erwarten ... Drum-Sound ... also! gut es ist eine Art von Arbeiten in dh 8, aber dann bist du keinen Text haben, erlaubt getippt stattdessen würden Sie ein Hintergrundbild verwenden Sie Ihren Text eingeben, um sicherzustellen, es ist das gleiche für alle Browser sieht, was ich in Ihrem Fall tun würde der Submit-Button wird das deaktivieren anschließend auf ganz klar für den Gebrauch zu machen, dass die Daten zu senden haben und verarbeitet werden. so etwas wie dies auch bedeuten, dass es tatsächlich ist.

<input type="submit" onclick="this.disabled=true;this.value='loading...'" />

Answer 2

Wenn Sie eine Grenze angeben, ist es die Standardeinstellung des Browsers entfernt etwas Styling.

Sie müßten manuell festlegen, wie die Schaltfläche aussehen soll, wenn sie gedrückt.

Auch bewusst sein, dass der IE eine 1px Grenze fügt die Absenden-Button, wenn jedes Element auf dem Formular ausgerichtet ist. Der einzige Weg, (ich kenne), um es loszuwerden, ist border: none; auf die Schaltfläche und Mimik der Grenze in einer anderen Art und Weise anzuwenden.