html bouton Envoyer ne coule pas visiblement lorsqu'il est pressé si la bordure est définie

Question

Je l'ai conçu de beaux boutons de formulaire HTML (pour input type = "submit"). Mais je me rends compte qu'ils ne l'évier plus lorsqu'il est pressé. Normalement, ce n'est pas un problème car appuyez sur la touche immédiatement vous amène à la page suivante. Et sur Firefox, il est un peu visible, car un contour en pointillé apparaît autour du texte du bouton. Mais un utilisateur a essayé de télécharger une grande image en safari et il était pas du tout clair que le bouton avait été pressé ou l'image a été en cours de téléchargement.

Alors, quelle est la meilleure façon d'avoir un stylisé soumettre avec une belle frontière qui fait clairement quand même être pressé? Je pourrais utiliser javascript pour détecter et appuyer sur unpressing et changer la classe en conséquence, mais je suppose que j'espère qu'il ya un moyen standard plus facile de le faire? Sinon, est-il une bonne bibliothèque jQuery pour régler ce problème?

Voici ce dont je parle: http://jsfiddle.net/gctJq/

Il suffit de trouver le jQuery UI bouton widget ! Devinez ce que je cherchais s'il n'y avait pas une solution standard HTML facile. J'utilise déjà jQuery UI pour d'autres éléments, se demandant combien il sera difficile de personnaliser pour obtenir des boutons dans toutes les tailles et les couleurs .. il semble être plus adapté à 1 taille standard et la couleur.

Answer 1

vous utilisez le: sélecteur actif

voir en action ici

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

est intéressant de noter que cela fonctionnera dans tous expect navigateur moderne ... son de batterie ... à savoir! Eh bien, ce genre de travaux à-dire 8, mais vous n'êtes pas autorisé à avoir le texte tapé à la place que vous utilisez une image de fond pour saisir votre texte pour vous assurer qu'il a la même pour tous les navigateurs, ce que je ferais dans votre cas est invalidantes le bouton d'envoi sur soumettre ce qui en fait tout à fait clair pour l'utilisation que les données ont été envoyée et est en cours de traitement. quelque chose comme cela va également indiquer que c'est est en réalité.

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

Answer 2

Lorsque vous spécifiez une bordure, il supprime le coiffage un peu par défaut du navigateur.

vous devez spécifier manuellement comment le bouton doit regarder lorsque vous appuyez.

Il faut aussi savoir que IE ajoute une bordure 1px au bouton soumettre lorsqu'un élément sur la forme se concentre. La seule façon (je sais) pour se débarrasser de celui-ci est d'appliquer border: none; au bouton et mimétique de la frontière d'une autre manière.