SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Styling Input Controls : Examples

Custom Border

<INPUT TYPE="text"
       STYLE="border: none; border-bottom: 3px navy double">
<INPUT TYPE="text"
       STYLE="border: 1px black solid; border-bottom: 3px navy double">

Custom Colors

<INPUT TYPE="text" 
       STYLE="background: lightblue; color: darkred; font-weight: bold">

Alignment and Font

<INPUT TYPE="text"
       STYLE="font: 10pt monospace; text-align: right" SIZE=3>

Note: Navigator 4.0 incorrectly aligns the text box at the right edge of the screen. Instead, the text inside of the input control should be right aligned.

Display Uppercase

<INPUT TYPE="text"
       STYLE="text-transform: uppercase" SIZE=3">

Note: This only changes the rendering of the text and does not actually convert the characters to uppercase.

Background Image

<TEXTAREA STYLE="width: 300; height: 300; background: URL(/gifs/inside.jpg)">
</TEXTAREA>

Note: Navigator 4.0 has problems with style sheets on text area elements. When adding background images to text boxes, you should pick an image that contrasts well with the text color. The image used above is a poor choice because you will notice that you cannot see what you are typing when over the image.

Discuss and Rate this Article