Styling input button with a sprite

Get Started
1

I’m trying to create an input button using a sprite and span for text replacement. i’m not very good with forms though, and it’s just not working for me…the background image isn’t showing up at all, just a 120x55 grey box. here is my code

input#search {
	float:right;
	position:relative;
	border:0 none;
	width:120px;
	height:55px;
}
input#search span{
	position:absolute;
	background:url('../images/home-search.gif') no-repeat scroll 0px 0px transparent;
	width:120px;
	height:55px;
	top:0;
	left:0;
	}

<input id="search" type="image" src="images/home-search.gif" value="SUBMIT" alt="submit"><span></span></input>

everything I try just makes me more confused! lol. i tried googling it but I can’t seem to find any examples or writeups on this. can someone help me?

thank you!

2

You can add effects “onfocus” / “onblur” and “onmouseover”/“onmouseout” to the element, which can change the class name, giving you a “hover” effect.

<input type="file" class="out" onmouseover="javascript:this.className='over';" onmouseout="javascript:this.className='out';" />
3

Input tags are self ending. You don’t use </input>

Put the background on the actual input element.

<style>
input#search {
	background:url('../images/home-search.gif') no-repeat scroll 0px 0px transparent;
	float:right;
	position:relative;
	border:0 none;
	width:120px;
	height:55px;
}
</style><input id="search" type="image" src="images/home-search.gif" value="SUBMIT" alt="submit" />
4

thanks for responding. I did try that, but it squished the entire image to fit in the space - both states of the image squished into a 55px high area.

also, I can’t seem to get a hover to work that way either - i assume you can’t use input:hover as it has no effect. …? i’m sure this is just my unfamiliarity with forms here, but nothing seems to be working. :confused:

5

thanks. but the main issue is that the sprite is displayed as a whole image squished down to 55px height. can you not use sprites with inputs?