Changing the look of a form's Submit button

CherishedSites · April 21st, 2005, 07:50 AM

Hi,

Does anybody know how to change the look of a Submit button on a standard HTML form?
Instead of the normal button I want to have just text saying "submit". Is it perhaps a play around with the CSS that is necessary? If it is, i might aswell ask this in the CSS forum.

Thanks!

markj · April 21st, 2005, 08:12 AM

if you just want the word submit you could just put a normal link

Code:

submit

and have a little script that does the submitting i.e.

Code:

function sub(){
document.<form-name>.submit();
}

Obviously change <form-name> to whatever your form is called and that should be it.

Mark

Rob · April 21st, 2005, 10:11 AM

I would definitly NOT do what mark has suggested.
NEVER use javascript unless it's absolutly nessesary.

Give your submit button an ID like this:-

Code:

 <input type="submit" name="mySubmit" value="Submit" id="MySubmit" />

You can then alter the properties via CSS:-

Code:

#mySubmit{
background-color:red; color:red; border:1px black dashed
}

You can even use CSS to set a background picture should you wish to use an image.

If you do in fact want just text (as Mark suggested), a far better way would be to make it 'appear' like a link and still keep the 'submit' function within the boundarys of normality:-

Code:

#mySubmit {
background-color:transparent;
color:blue;
text-decoration:underline;
cursor:hand;
border:0 transparent none;
}

Hope this helps.

Changing the appearance of your submit button with CSS will ensure that the submit button functions normally when javascript or CSS support is not present.

CherishedSites · April 21st, 2005, 10:52 AM

Thanks guys. I went with what Rob suggested and it's perfect.

Thanks again!

Rob · April 21st, 2005, 11:48 AM

BTW mark....

Welcome to the forums... just noticed it was your first post... hope I have not put you off.

markj · April 21st, 2005, 05:28 PM

Hi rob,

No you haven't put me off.

Mark