Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
Search Engine Marketing
Internet Marketing
Affiliate Marketing
Email Marketing
Viral Marketing
Webmaster Resources
Business Resources
Make More Money
CSS
Web Design
Graphic Design
Color Theory
Product Reviews
Time Management
Business Ethics
Promotional Strategies
Glossary of Terms
Direct Mail Marketing
Telemarketing
Product Sourcing



Link to Us!

CSS
Email this article  :  Printer friendly page

Resizing Form Input Boxes, Buttons, and Text with CSS

Resizing Form Input Boxes, Buttons, and Text with CSS

Click Here to View Live ExampleThanks to the magical process of CSS you are not limited to the standard size boxes, buttons and the actual input text for your web forms. Here's a quick and easy way to change the size of input boxes, submit and reset buttons, and the actual text your visitors input into your web forms.

Copy/paste the custom class CSS code below into your external stylesheet. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, External, Internal or Inline? Which Method is Best?"

.form { font-size: 9px; color=#990000; }

The font-size property in this code is set to 9 pixels and controls the size of the input box, text entered into the input box and the text on the submit button if this custom class is assigned to these HTML form elements. We also added the color property and indicated a red hex code. This displays red text that is entered into the input boxes. See below:

Name: <input type="text" name="name" class="form">
Email: <input type="text" name="email" class="form">
<input type="submit" name="Submit" value="Submit" class="form">

You could easily create a separate form custom classes for your submit button and resize or recolor it as you wish using this same concept.

Click Here to view live comparison examples of a standard web form and a revised version using this mini-tutorial.

Related Articles:

Colorize Your Web Page Forms using CSS
Removing Space Around Forms
HTML Forms: Is Your Site Interactive?
Custom Form Buttons
Drawing Attention to Your Forms

Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.com, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Order soon and get up to 5 FREE domains & more!
Host 6 Domains on 1 Account
5000MB and 400GB for $6.95 a month!

 

Page copy protected against web site content infringement by Copyscape
All articles are originally authored by BasicTemplates.com. Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006 BasicTips.com, a division of BasicTemplates.com, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates