How to remove the shadow of HTML text input

Written by tim searles
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to remove the shadow of HTML text input
Computer keys (computer image by Blaine stiger from Fotolia.com)

HTML text input boxes are used in forms to gather user information. Inherently they include shadows based on what browser you use. Safari, for example, has the blue hover around the box when focused on the box. Using CSS can remove the shadow from input textboxes and customise them to fit the design of the overall site. Most times a developer will maintain the box feel but occasionally a graphic design will be applied to a text box. A task such as removing a text shadow should not sacrifice the functionality of the form element but enhance it.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Open a text editor such as Dreamweaver or BBEdit (see Resources) and create a HTML file. Insert an HTML form including at least one input with type="text". Create a stylesheet file and name it "main.css."

  2. 2

    Create a CSS class for input textboxes. Give it a name that's close to what it will style such as "textboxes." This class name will reside in your stylesheet file and will hold the style definition for your text boxes.

  3. 3

    Define the attributes of your CSS class. Here are examples of specific attributes you may have to define:

    border: 1px solid #000000;

    font-size: 14px;

    colour: #333333;

    padding: 5px 5px 5px 5px;

    background: url("images/myinputbox.jpg") 0 0 no-repeat;

    width: 300px;

    position: relative;

    float: left;

    Changing the border attribute is the most important to changing any text input attribute. That is usually what determines the shadowing around the text box. Adjusting padding allows you to determine the amount of space (in pixels) from inside the text box. Font size and colour allow you to determine the input box's text size and colour. Adding a background allows you to customise your input text box to follow your website's design.

  4. 4

    Add the class you created to any text input you want styled. Follow this format:

    <input type="text" name="mytextbox" class="textboxes" value="test" />

    Use the same class for each text input box so that the same style will be applied equally on all input text boxes.

  5. 5

    Insert your stylesheet file into your HTML file within the <head> tag. Follow this format:

    <link rel="stylesheet" href="main.css" type="text/css" />

    Open your HTML file in a web browser and view the input box(es) you created. Revise stylesheet file as necessary to achieve desired look and feel.

Tips and warnings

  • When creating CSS classes it's important to establish a naming convention that anyone can follow. Someone else may inherit your code and it will help them to follow what you're doing if you leave a good pattern.
  • When using backgrounds for input text boxes it is best to use a background that cannot repeat and has a fixed height and width that adjusts to your text box.
  • Modern browsers will allow you to style text boxes without using a specific class. The format for this kind of style would follow this format: input[type="text"] { insert your style attributes here }.
  • Sometimes it's better to favour inherent browser form stylings than creating CSS form stylings because different browsers render form elements differently. You may need to apply different styles based on what browser you use.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.