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 can I hide the backface of a block element rotated with transform: rotateX()?

    How do i add a background image to my header?

    How to match baseline in two floating divs

    How to use absolute position relative to parent element

    How can i place a child div on a fixed position of a parent div that when i change place of parent then child should move automatically?

    how to trigger a css animation after certain pixels of scroll

    How to make a radio button look like a toggle button

    How to dynamically remove all unwanted CSS and JS from page

    How to style SVG via css?

    How can I get this effect (on height) with jquery?

    How to vertically align an image in a container that fills the page?

    Ribbon and stars - How to get this done without an image file?

    how to base a css rule on inherited value of dir attribute

    How to make the contents of a div not wrap?

    How to add a css to a view in the Controler?

    “Dynamic” CSS id names? How to add them to the CSS file?

    css selector question, how to change font colover of parent li when child ul is focused

    How to add custom css class for each page?

    Grails: How do I use the resources plugin to add a CSS “link” tag into the head?

    How to manually apply styles from particular style sheet to an element?

    Prevent div from showing after slideUp() - jQuery

    How to change text color for all links in Materialize CSS navbar?

    how to remove css property “element{}” [closed]

    How to stretch parent div to fit children div?

    How to find out DOM and CSS address to an element for Selenium?

    How do I create a pattern overlay in CSS

    How do I correct overlapping spacing error in CSS when it wraps text?

    How to make submenus drop down below parent menu, instead of flying out?

    How to set style for n-th td in a table using css

    How to showing expanding text with javascript and css