Using class on input type onfocus

hi folks,
i am working a page it has input type set to submit, now i wanna have same effects as a:hover in that input type. i suppose that is done with JavaScript’s onfocus? but i don’t know how to pass a class in onfocus, can anyone help me with that?

i don’t know much of JS, using type button instead of submit. i lost the functionality i.e search and the text isn’t aligned in center anymore :frowning:

?? Do you want a background image for a input field?

this is a css forum question :slight_smile:

anyway, on an input having the type button, assuming your image has sprites, you can also use a tristate:

/*normal appearence*/
input[type="button"] {background: url(button.img) no-repeat left top)}
/*when hover over it*/
input[type="button"]:hover {background-position: left center}
/*when pressed*/
input[type="button"]:active {background-position: left bottom}

this is just to give you an idea. you’ll have to look for different scenarios when this is not working and implement workarounds.

it’s worth mentioning that using a button element rather than an input element of type button will give you more room to CSS it.

no what i want is, when a person click on a button, the button looks like its pressed (which i have a image for), now in css i can do it by a:active but how do i do on <input type=“submit”>

well can u gimme a example of a html input field with image changed when pressed?

input:focus {
/* whatever values you want to have */
}

Well… you could use :hover selector but will not work on IE6 and 7(the last one is a guess). So, if you are not targeting IE users then use it. Else use a javascript event like onmouseover/onmouseout pair to accomplish to job.