¿Cómo se graban las entradas de "enviar" al pasar el mouse, haga clic en?

Question

Necesito configurar dos entradas diferentes para que aparezcan de forma diferente al pasar el mouse y al hacer clic, al igual que con los botones. Normalmente usaría botones; sin embargo, uno de estos es un tipo de entrada = "reiniciar" y supongo que es más sencillo utilizar una entrada para esto que escribir un script de reinicio de formulario. ¿Cómo ingresa un estilo los tipos "enviar" y "restablecer" con CSS para mouseover y hacer clic?

Answer 1

Suponiendo que quiere decir en el CSS, en lugar de un enfoque de JavaScript, puede utilizar pseudo-clases:

input[type=reset], /* CSS2.1 attribute-equals selector */ 
#resetButtonID, 
.resetButtonClass-Name { 
    /* the reset button */ 
} 

input[type=reset]:hover, 
#resetButtonID:hover, 
.resetButtonClass-Name:hover { 
    /* the reset button when hovered over */ 
} 

input[type=reset]:active, 
#resetButtonID:active, 
.resetButtonClass-Name:active { 
    /* the reset button when mouse-down */ 
} 

input[type=reset]:focus, 
#resetButtonID:focus, 
.resetButtonClass-Name:focus { 
    /* the reset button when focussed by keyboard-navigation */ 
} 

JS Fiddle demo.

Answer 2

Es lo mismo que cualquier otro elemento en CSS, hay selectores de psuedo para desplazarse y enfocar, pero no específicamente para hacer clic. También puede utilizar el selector de atributos:

input[type="reset"]{/* attribute selector*/} 
input[type="reset"]:hover{/* :hover psuedo selector*/} 
input[type="reset"]:focus{/* :focus psuedo selector*/} 
input[type="reset"]:active{/* :active psuedo selector (for click)*/} 

El estilo de enfoque se aplicará cuando el usuario haga clic en un principio (o se centra, por supuesto), pero perderá el estilo una vez que el usuario se mueve el foco a otro elemento. Para obtener específicamente estilos de clic para ese pequeño momento mientras el botón del mouse está presionado, use javascript o pruebe el selector :active, que (ahora me doy cuenta) se puede aplicar a elementos que no son de anclaje.