Way cool, super deluxe, nifty input boxes

[Skelbo]

Recently I was challenged to implement some Username/Password input boxes on a client's site.

Alas, these were no ordinary, run-of-the-mill input boxes nor were they moderately styled with a perhaps a colored background and/or border.

Nay! Nay! These input boxes had rounded corners, a drop shadow and a background pattern as well.

Example:


At first I was vexed, but I refused to be defeated by an input box!
After much gnashing of teeth and wringing of hands the answer came to me...

FIrst I removed all borders from my input boxes:

Code: Select all

input{
border:0;
}

Then I created a style called usernamePassword which will style both the Username and Password input boxes.

I decided to use the drop shadowed, patterend image (input_username.gif) as a background within the input boxes.

The comp showed that the input boxes were to be 95px wide and 19px tall, so armed with that information I made the input boxes 95px by 19px, reduced the font size by 25% and specified the input text would be grey.

.usernamePassword
{
font-size:75%;
color:#666666;
height:19px;
width:95px;
background-image:url('/images/input_username.gif');
background-repeat:no-repeat;
}

This however, made the text bump into the edge of the input box, destroying the illusion of a rounded corner and drop shadow.

By adding a little padding, the text can be positioned within the input box and place it inside the curve and below the drop shadow.

.usernamePassword
{
font-size:75%;
color:#666666;
height:19px;
width:95px;
background-image:url('../images/input_username.gif');
background-repeat:no-repeat;
padding:3px 6px 0 6px;
}

One would think that we were now finished...but not so. Of course...IE6 must cause a problem. Simply specifying the background not to repeat isn't enough. When a username of password is exceptionally long, the background scrolls with the text.

So...we need (yet another) fix for IE.

.usernamePassword
{
font-size:75%;
color:#666666;
height:19px;
width:95px;
background-image:url('../images/input_username.gif');
background-repeat:no-repeat;
padding:3px 6px 0 6px;
/*for IE*/
background-attachment: fixed;
}

Now all we have to do is align the image we are using as our input button, like so;

Code: Select all

.logInButton
{
 vertical-align:-4px;
}
/* for IE6*/
*html .logInButton
{
 vertical-align:2px;
}

Here's the code for the form itself:

Code: Select all

<form name="foo" action="foo" method="post">
     <input type="text" name="username" value="Login Name" class="usernamePassword" />
     <input type="password" name="password" value="Password" class="usernamePassword" />
     <input type="image" src="http://www.webforumz.com/images/btn_login.jpg" name="login" class="logInButton" />
   </form>

Here's the final CSS:

Code: Select all

.usernamePassword
{
font-size:75%;
color:#666666;
height:19px;
width:95px;
background-image:url('../images/input_username.gif');
background-repeat:no-repeat;
padding:3px 6px 0 6px;
/*for IE*/
background-attachment: fixed;
}

Voila! Easy cheesy!

[Lchad]

Wow that is soooooooooo nice!!!

[VanessaJW]

Cool You can be on my team...

[charlie019]

I love it. The title describes it perfectly