How to style "submit" inputs on mouseover, click?

Question

I need to style two different inputs to appear differently on mouseover and on click, much like buttons. Ordinarily I would use buttons; however, one of these is an input type="reset" and I assume it is simpler to use an input for this than write a form reset script. How does one style inputs with the types "submit" and "reset" with CSS for mouseover and click?

Solution 1

Assuming that you mean in CSS, rather than a JavaScript approach, you can use pseudo-classes:

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.

Solution 2

It's the same as any other element in CSS, there are psuedo selectors for hover and focus, but not specifically for click. You can also use the attribute selector:

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)*/}

The focus style will be applied when the user initially click (or focuses of course), but will lose the style once the user moves focus to another element. To specifically get click styles for that small moment while the mouse button is down, use javascript or try the :active selector, which (I just now realized) can be applied to non-anchor elements.