html pulsante non visibilmente affondare presentare quando viene premuto se confine è insieme

Question

Ho progettato i pulsanti belli modulo HTML (per input type = "submit"). Ma mi rendo conto che non sono più lavandino quando viene premuto. Normalmente, non è un problema perché la pressione del tasto vi porta immediatamente alla pagina successiva. E su Firefox è un po 'visibile perché un contorno tratteggiato appare intorno al testo del pulsante. Ma un utente ha tentato di caricare una grande immagine su safari e non era affatto chiaro che il pulsante è stato premuto o l'immagine è stata caricato.

Allora, qual è il modo migliore per avere una stilizzata presentare con un bordo bello che lo rende molto chiaro quando viene premuto? Potrei usare javascript per rilevare la pressione e unpressing e cambiare la classe di conseguenza, ma credo che spero ci sia un modo standard più semplice per fare questo? In caso contrario, c'è una buona libreria jQuery per far fronte a questo?

Ecco cosa sto parlando: http://jsfiddle.net/gctJq/

Appena trovato il pulsante jQuery UI Widget ! Che questo è ciò che stavo cercando, se non ci fosse una soluzione facile HTML standard. Uso già jQuery UI per altri elementi, chiedendosi quanto sia difficile sarà per personalizzare questo per ottenere bottoni in tutte le taglie e colori .. sembra essere più adatto a 1 dimensione standard e colore.

Answer 1

si utilizza il: Selettore attiva

vederlo in azione qui

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

degno di nota è che funzionerà in tutte le moderne suo navigatore aspettano ... suono di batteria ... vale a dire! bene che tipo di opere in IE 8 ma poi non ti è permesso avere alcun testo digitato invece si usa un'immagine di sfondo per digitare il testo per assicurarsi che sembra la stessa per tutti i browser, quello che vorrei fare nel tuo caso è la disabilitazione del pulsante di invio su Invia rendendo abbastanza chiaro per l'uso che i dati sono stati invio e sta per essere eseguita. qualcosa di simile sarà anche indicare che in realtà è.

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

Answer 2

Quando si specifica un bordo, rimuove di default del browser styling un po '.

Si avrebbe bisogno di specificare manualmente come il tasto dovrebbe apparire quando viene premuto.

Anche essere consapevoli del fatto che IE aggiunge un bordo 1px per il pulsante di invio, quando ogni elemento sul modulo si concentra. L'unico modo (che conosco) per sbarazzarsi di esso è quello di applicare border: none; al pulsante e mimica il confine in un altro modo.