html botón no se hunde visiblemente presente cuando se presiona si es fronteriza conjunto

Question

he diseñado bellos botones de formulario HTML (por input type = "submit"). Pero me doy cuenta de que hay lavabo ya cuando se presiona. Normalmente, no es un problema porque presionando el botón lo lleva inmediatamente a la página siguiente. Y en Firefox es un poco visible debido a un esquema de puntos aparece alrededor del texto del botón. Sin embargo, un usuario ha intentado cargar una imagen grande de safari, y que no era del todo claro que el botón ha sido presionado o la imagen estaba siendo cargado.

¿Cuál es la mejor manera de tener una estilizada presentar, junto con una frontera agradable que hace que sea muy claro cuando se presiona? Podría usar javascript para detectar la presión y unpressing y cambiar la clase en consecuencia, pero supongo que estoy esperando que hay una manera estándar más fácil de hacer esto? Si no, ¿hay una buena biblioteca jQuery para hacer frente a esto?

Esto es lo que estoy hablando: http://jsfiddle.net/gctJq/

Sólo se encontró el botón jQuery UI widget ! Supongo que esto es lo que estaba buscando si no había una solución estándar HTML fácil. Ya utilizo jQuery UI para otros elementos, preguntándose lo difícil que será para personalizar esto para conseguir botones en todos los tamaños y colores .. parece ser más adecuado para 1 tamaño y color estándar.

Answer 1

se utiliza el selector: activa

verlo en acción aquí

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

digno de mención es que va a trabajar en todos los navegadores modernos de esperar ... sonido de batería ... es decir! así que tipo de trabajos en IE 8 pero entonces no se les permite tener cualquier texto escrito en su lugar se utilizaría una imagen de fondo para escribir el texto para asegurarse de que tiene el mismo para todos los navegadores, lo que haría en su caso es deshabilitar el botón de enviar en presentar lo que es bastante claro para el uso que los datos han sido envía y se está procesando. algo como esto indicará también que en realidad es.

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

Answer 2

Cuando se especifica una frontera, se elimina por defecto del navegador estilizar un poco.

tendría que especificar manualmente el botón de cómo debe verse cuando se presiona.

También tenga en cuenta que IE añade un borde de 1 píxel al botón de enviar cuando cualquier elemento en el formulario se centra. La única manera (no conozco) para deshacerse de él es aplicar border: none; al botón e imitar la frontera de otra manera.