Dave, how can you change the attributes of the Submit button (font, color, color of the button, etc.)? When I get the answer, I promise to buy you that chai.
Well, thanks for buying me a chai first off! 🙂
There are two different ways that you can tweak the appearance of a submit button in an HTML form: you can use Cascading Style Sheet attributes, or you can simply replace it with a graphic.
The latter is easier to explain, so check this out:
<b>Search on Yahoo: </b>
<input type=”text” name=”p” />
<input type=”image” name=”submit” src=”submit.png” border=”0″ />
</form>
Here’s how this mini-form — a Yahoo search box for your own Web page, actually — looks when I add my rather crazy looking submit button:
Try it, the form really works.
That’s one way you can get the submit button to look as you desire: just create it in a button editor or graphics editor and you’re set.
The other way to work with the submit button, however, a way that’s far more common, is to make some tweaks in the CSS stylesheet for the page itself. This can be done within the submit tag itself, using the style=”” attribute, but I prefer to drop it into its own style block at the top of the page.
That looks like this:
#mysubmit { background-color: #cfc; font-size: 60%;
padding: 20px; font-weight: bold; }
</style>
<form method=”get” action=”http://search.yahoo.com/search”>
<b>Search on Yahoo: </b>
<input type=”text” name=”p” />
<input type=”submit” id=”mysubmit” value=”go!” />
</form>
I’m using the “id” attribute to target a specific element of the page with the CSS modifications (“mysubmit”) and it’s very important ot note that some browsers just cannot render these stylized buttons properly, processing some attribute changes, but ignoring others.
In this example, I’m changing the size of the text in the submit button (making it smaller and bold), changing the background color of the button from the usual grey to a light green, and making the button itself larger by adding more padding than usual. Here’s the result:
Note that your browser might well not show anything fancy, so I’ll also show you how it renders in the CSS-friendly Firefox browser:
Hope that helps you start traveling down the road to custom submit buttons!
hello , thanks for the script sir, if you are vacant and could give a hand can someone help me make facebook apps ? heheheh please contact me
Nice job, Jim. Haven’t looked at this code for a while… 🙂
Hi Dave
Found a bug in your page code. “Search on Yahoo” example had the regular-looking submit button (but with the revise “go!” text) on Chrome-de-jour so I tried it on IE8 with same result and then FF-de-jour and still same old submit button appearance (text was correct). So I FireBugged your page code and found this:
<p>
<style rel=”stylesheet” type=”text/css”>
<br />
#mysubmit { background-color: #cfc; font-size: 60%; padding: 20px; font-weight: bold; }<br />
</style>
</p>
Removing the first BR element work fixed the problem (button now renders as desired)… but removing both keeps it real clean:
<p><style rel=”stylesheet” type=”text/css”>
#mysubmit { background-color: #cfc; font-size: 60%; padding: 20px; font-weight: bold; }
</style>
</p>
Finally, — at least on the browser I can edit with FireBug (FF 16) — one can eliminate the <P> tags and just have the STYLE element in-line for the cleanest page code:
<style rel=”stylesheet” type=”text/css”>#mysubmit { background-color: #cfc; font-size: 60%; padding: 20px; font-weight: bold; }</style>
Hope all goes well. I dropped by looking for ways to add a Google Search box to a friend’s page in such a way that it would search only her site. Found your recommendations and now am off to do battle with the HTML editor! 🙂
Hi, do you know how I could change the appearance of all buttons on my site? My platform is blogger and a lot of the buttons are already laid out for me: http://daniellewu.com
I simply want to change the appearance of the “submit” and “search” buttons.
Thanks!:)
xx
danielle
bvglooks, not sure what you’re asking. The code we’ve modified is embedded in the HTML page that includes the submit button. I don’t know what your .css files are associated with (a wordpress installation?) but what you seek is going to be on an .html page or a template that produces an html page.
Hi.. I wanted to know what exact file has the code you modified? I checked htmlviewer.css and SP_Full.css but could not find similar code in it to change.
Thanks,
BVG
Thank you, this works!
10x man great tutorial!
Hi Dave, Can i get a image as textfield 2? that plain white box is so boring 😀
Hmm Dave..its a nice topics, but how can i use the .tiff file instead of ordinary image files.Thank you very much ^^
Yowza. What a gaffe. Fixed! 🙂
Thx very much, just one little type error: you got all the > at the end of a tag mixed up for a <