How to Customize Input Boxes With CSS

A Cascading Style Sheet, or CSS, describes the layout semantics of a document. CSS allows a page builder to separate out the text from the look of the page. For instance, you could set up all forms the same way in a website without having to type instructions for every form. An input box takes information provided by users and incorporates it into a process. Every time you type your name into a website, you are using an input box to provide information. Customizing an input box is a vital role of CSS. It takes some practice to learn the correct syntax, but the result will give you powerful input boxes that pop on a page.

Instructions

1. Set up the style sheet. In CSS, you must first establish that you are creating a style sheet. Type in:
   <style type="text/css">

2. Establish your form. The CSS language identifies forms by type of input element, such as input or textbox:

   <style type="text/css">
   input {

   }

3. Select your background color and type in the appropriate information within the curly brackets. For instance, if you want the background of your form to be a specific shade, you would type in "background-color:" then add the hexadecimal code (see resource link below) after the colon. To assign the color white as your background, your syntax would look like this:

   <style type="text/css">
   input {
   background-color: #FFFFFF;
   }

   All style lines within brackets must end with a semi-colon.

4. Establish a border color and indicate the size of the borderline.

   <style type="text/css">
   input {
   background-color: #FFFFFF;
   border: 1px solid #555555;
   }

   This will produce an input box on a white background with a 1 pixel, dark gray border.

5. Define the font. When assigning a font, you should choose family style (such as Verdana), a color and a letter size. To assign the font as gray, Verdana, with a point size of 10, you would type:

   <style type="text/css">
   input {
   background-color: #FFFFFF;
   border: 1px solid #555555;
   font-family: verdana;
   font-size: 10px;
   color: #555555;
   }

6. Add the closing tag to finish the page. Syntax for closing tags is </style>
   The final product looks like this:

   <style type="text/css">
   input {
   background-color: #FFFFFF;
   border: 1px solid #555555;
   font-family: verdana;
   font-size: 10px;
   color: #555555;
   }
   </style>

References

• Ron's Guide: Custom Input Fields

Resources

• Long Island University: Color Chart