How to style “submit” inputs on mouseover, click?


Tags: css,input,click,mouseover,reset

Problem :

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 :

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.


    CSS Howto..

    How to prevent CSS in dynamically added HTML content from overriding my JSP's CSS content?

    How to force a responsive element to retain its aspect ratio [duplicate]

    How To Set Height of Child Div According To Parent Div

    How to animate CSS resize?

    how I can change the size of font inside PHP

    How can I have a responsive height with absolutley position child elements

    How to stop shadow effect from moving using pure css?

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    How to get rid of CSS cascading in internal element widgets

    How to make a jQuery script and CSS responsive?

    How come the first

    How to define a document in javascript? WebStorm

    How to avoid bloating pages with divs?

    How to set animation in css?

    How To Fix This “Select” Drop Down Using Css [duplicate]

    How to select Bootstrap's collapsed menu button with CSS

    How to define absolute positioned element's anchor point?

    Qt: Hower effect overlapped with selected tab

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    In CSS/SVG, how to rotate each character of a word?

    How to hide show image link on top of another image link

    How can I embed a smartphone simulator in html5? [closed]

    How to inherit CSS using Less?

    How do I uncollapse a margin?

    How can I show only a section of a video frame with CSS or JavaScript?

    How to find the screen width and apply it to a particular css

    How to control multiple images for a single background definition

    How to align a HTML definition list (
    ) horizontally without limiting term or definition in height?

    How to show and hide fieldset content on click of the legend

    Jquery hide / show div but to keep toggle link from “hiding” too