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 Money Grows On Trees... War Room Member Join Date: May 2006 Location: In the trenches... Posts: 2,375 Thanks: 553 Thanked 527 Times in 235 Posts Contact Info	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...
	Confessions of a $94,000 Freelance Writer - How To Make a REAL Income From Freelance Writing At Home. Click Here For Details >>>

07-13-2009, 08:50 PM	#2
HomeBizNizz A rat after money... War Room Member Join Date: Jul 2009 Location: Inside a cheese... Posts: 598 Thanks: 363 Thanked 54 Times in 47 Posts	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...
	FREE downloadable ButterflyOpenSourceCode.com script install guide Brainstorm your own topics for your articles, blogentries, videos, ebooks by using this easy form

07-14-2009, 01:51 AM	#3
Kezz Kezz Bracey War Room Member Join Date: Dec 2008 Location: Australia Posts: 1,291 Blog Entries: 5 Thanks: 323 Thanked 596 Times in 291 Posts	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.
	Get your AAA Starter LOCAL theme FREE with the Website Weaver. Point & Click WordPress Theme Creation - Beginner Friendly, Expert Ready, WYSIWYG Theme Editor. Quickly & Easily Create Any Type Of WordPress Theme. No Experience Required.

07-14-2009, 03:17 AM	#4
n7 Studios Web Developer, IT Support War Room Member Join Date: Dec 2008 Location: Birmingham, UK Posts: 513 Thanks: 10 Thanked 77 Times in 65 Posts Social Networking	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>
	THE Web Development Guru - Wordpress / Magento / iOS Bespoke Dev. HTML5, CSS3, PHP, MySQL. -- UK Internet Marketing Community.

07-14-2009, 12:38 PM	#5
Nick Brighton Money Grows On Trees... War Room Member Join Date: May 2006 Location: In the trenches... Posts: 2,375 Thanks: 553 Thanked 527 Times in 235 Posts Contact Info	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?
	Confessions of a $94,000 Freelance Writer - How To Make a REAL Income From Freelance Writing At Home. Click Here For Details >>>

07-14-2009, 04:31 PM	#6
n7 Studios Web Developer, IT Support War Room Member Join Date: Dec 2008 Location: Birmingham, UK Posts: 513 Thanks: 10 Thanked 77 Times in 65 Posts Social Networking	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.
	THE Web Development Guru - Wordpress / Magento / iOS Bespoke Dev. HTML5, CSS3, PHP, MySQL. -- UK Internet Marketing Community.