
How do I change the appearance of a SUBMIT button?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: <form method="get" action="http://search.yahoo.com/search">
<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: <style type="text/css" rel="stylesheet">
#mysubmit { background-color: #cfc; font-size: 60%; padding: 20px; font-weight: bold; } </style> <form method="get" action="http://search.yahoo.com/search"> 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!
Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Simpy.
Categorized:
HTML and CSS
(Article 6525)
Tagged: css, html, yahoo Previous: What is Cinco de Mayo? Next: How do I add web links to my LinkedIn Profile? Subscribe!
Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader. Thx very much, just one little type error: you got all the > at the end of a tag mixed up for a < Posted by: Harm at January 28, 2007 4:08 AMYowza. What a gaffe. Fixed! :-) Posted by: Dave Taylor at January 29, 2007 10:15 AMHmm Dave..its a nice topics, but how can i use the .tiff file instead of ordinary image files.Thank you very much ^^ Posted by: Nikolaus Tan at April 28, 2008 1:25 AMI have a lot to say, but ...
I do have a comment, now that you mention it!
|
![]()
Search
Find just the answers you seek from among our 1700+ free tech support articles by using our Lijit search engine.
Help!
Subscribe to
Ask Dave Taylor!
Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.
Articles and Reviews
Auctions and Online Shopping Blogs and RSS Feeds Building Web site traffic Business and Management Cell Phones and Mobile Phones CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above HTML and CSS Mac OS X Help MySpace, Facebook, Twitter and Social Network Help Pay Per Click (PPC) Search Engine Optimization Shell Script Programming Sony PSP, MP3 Players, Etc. The Writing Business Unix and Linux Help Video Game Tips and Help Windows Help
Recent Entries
Join the List!
Book Links
|