How do I make my CSS submit button actually "submit"?

Nick Brighton · 07-13-2009, 03:54 PM

Hey all,

Wonder if you can help me? I'm trying to customize a form submit button using a css rollover like this:

#submit {
background-image: url(Images/button.png);
display: block;
height: 60px;
width: 299px;
}
#submit:hover {
background-position: 0 -60px;

}
#submit span
{
display: none;
}

The rollover/appearance looks fine in all browsers, but how do I turn this into an actual submit button without having the grey submit box showing up in the background?!

My html code is:

<table>
<tr>

<td width="240"><input name="Email1" type="text" size="40" ></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" input id="submit" />

</td>

I've tried changing input type from "button" to "hidden" but then it deactivates the button functionality.

Any help would be more than appreciated, really it would...

HomeBizNizz · 07-13-2009, 08:50 PM

You'll need the form tags too...

<form id="form1" name="form1" method="post" action="">
<input type="text" name="textfield" />
<input type="submit" name="Submit" value="Submit" />
</form>

action="process.php" sends to a PHP script f.ex...

Kezz · 07-14-2009, 01:51 AM

Try specifically telling your ID that it is applied to an input tag. eg. input#submit

Let us know if that works.

n7 Studios · 07-14-2009, 03:17 AM

PHP Code:


			
<html>
<head>
<style type="text/css">
#submit {
    width: 299px;
    height: 60px;
    background: url(button.gif) 0 0 no-repeat;
    border: none;
}
#submit:hover {
    background: url(button.gif) 0 -60px no-repeat;
    cursor: pointer;
}
</style>
</head>

<body>
<form action="" method="post">
    <input type="submit" name="Submit" value="" id="submit" />
</form>
</body>
</html>

But this won't work in IE6 - IE6 doesn't support the :hover pseudo class on anything other than a link i.e. <a href...></a>

Nick Brighton · 07-14-2009, 12:38 PM

Thanks for the suggestions guys, but this still isn't working. I keep getting the grey box in the background instead of just the image.

Weird, any other ideas?

n7 Studios · 07-14-2009, 04:31 PM

You've got some other CSS that's providing a grey background colour on input elements.

Get Firefox. Get Web Developer and Firebug plugins. Learn to use them. You'll be able to then see the CSS rules being applied to HTML elements, and fix these issues in seconds.

07-13-2009, 03:54 PM	#1
Nick Brighton Offensively Defensive War Room Member Join Date: May 2006 Location: In the trenches... Posts: 1,411 Thanks: 156 Thanked 146 Times in 63 Posts	How do I make my CSS submit button actually "submit"? Hey all, Wonder if you can help me? I'm trying to customize a form submit button using a css rollover like this: #submit { background-image: url(Images/button.png); display: block; height: 60px; width: 299px; } #submit:hover { background-position: 0 -60px; } #submit span { display: none; } The rollover/appearance looks fine in all browsers, but how do I turn this into an actual submit button without having the grey submit box showing up in the background?! My html code is: <table> <tr> <td width="240"><input name="Email1" type="text" size="40" ></td> </tr> <tr align="center"> <td colspan="2"> <input type="button" input id="submit" /> </td> I've tried changing input type from "button" to "hidden" but then it deactivates the button functionality. Any help would be more than appreciated, really it would...
	I know why your sales SUCK. And I guarantee if you use this method, you WILL double your income or I'll buy it back off you TWICE. CLICK HERE to get it before I pull it

07-13-2009, 08:50 PM	#2
HomeBizNizz HyperActive Warrior War Room Member Join Date: Jul 2009 Posts: 290 Thanks: 104 Thanked 20 Times in 20 Posts Social Networking	Re: How do I make my CSS submit button actually "submit"? You'll need the form tags too... <form id="form1" name="form1" method="post" action=""> <input type="text" name="textfield" /> <input type="submit" name="Submit" value="Submit" /> </form> action="process.php" sends to a PHP script f.ex...
	My webprojects - OpenSourceScripts 2 testing - My Joomla testsite OpenTTD, a free (opensource) strategy game (also multiplayer)... My new OpenTTD forum (still in development)...

07-14-2009, 01:51 AM	#3
Kezz Wordpress Wiz War Room Member Join Date: Dec 2008 Location: Australia Posts: 530 Blog Entries: 2 Thanks: 65 Thanked 142 Times in 74 Posts Social Networking	Re: How do I make my CSS submit button actually "submit"? Try specifically telling your ID that it is applied to an input tag. eg. input#submit Let us know if that works.
	Multi-purpose IM Theme, Squeeze Pages, Minisites, Blogs, Review Sites - See inside for Video Review "Conduit Christmas" - Now's the time to get in on the Christmas $$$.

07-14-2009, 03:17 AM	#4
n7 Studios Web Developer, IT Support War Room Member Join Date: Dec 2008 Location: Birmingham, UK Posts: 290 Thanks: 7 Thanked 37 Times in 35 Posts Social Networking Contact Info	Re: How do I make my CSS submit button actually "submit"? PHP Code: `<html> <head> <style type="text/css"> #submit { width: 299px; height: 60px; background: url(button.gif) 0 0 no-repeat; border: none; } #submit:hover { background: url(button.gif) 0 -60px no-repeat; cursor: pointer; } </style> </head> <body> <form action="" method="post"> <input type="submit" name="Submit" value="" id="submit" /> </form> </body> </html>` But this won't work in IE6 - IE6 doesn't support the :hover pseudo class on anything other than a link i.e. <a href...></a>
	n7 Studios - Web Development, Design and IT Support Need a Web Site? Hire Me!

07-14-2009, 12:38 PM	#5
Nick Brighton Offensively Defensive War Room Member Join Date: May 2006 Location: In the trenches... Posts: 1,411 Thanks: 156 Thanked 146 Times in 63 Posts	Re: How do I make my CSS submit button actually "submit"? Thanks for the suggestions guys, but this still isn't working. I keep getting the grey box in the background instead of just the image. Weird, any other ideas?
	I know why your sales SUCK. And I guarantee if you use this method, you WILL double your income or I'll buy it back off you TWICE. CLICK HERE to get it before I pull it

07-14-2009, 04:31 PM	#6
n7 Studios Web Developer, IT Support War Room Member Join Date: Dec 2008 Location: Birmingham, UK Posts: 290 Thanks: 7 Thanked 37 Times in 35 Posts Social Networking Contact Info	Re: How do I make my CSS submit button actually "submit"? You've got some other CSS that's providing a grey background colour on input elements. Get Firefox. Get Web Developer and Firebug plugins. Learn to use them. You'll be able to then see the CSS rules being applied to HTML elements, and fix these issues in seconds.
	n7 Studios - Web Development, Design and IT Support Need a Web Site? Hire Me!