How to create stylish text inputs for search, login or comment forms

You may have seen many stylish text inputs and designer forms in many websites. Just putting some text inputs and text areas and buttons, can't attract users to click there or type in some texts for you. If you wish your users grab those forms and fill out important information for you, you have to make those inputs in such a way that users get them accustomed with your site's theme. Users generally find no input forms to be interesting except it is a search box, which he/she have to use without any other option. But still f you make search inputs similar to your theme, it adds to your design and make it comfortable for your uses. After all designing is all about making elements soothing to users' eyes.

Here is a tutorial to make text inputs beautiful and matching to your website's theme. Suppose you have a login input in a bar, where users enter their passwords. Here is a sample how the input has been matched with the bar.

Here I have created a stylish input matching with the dark red colored background bar. Now lets see how you can implement it.

At first just insert normal form and input elements in your page like this.



Login:

View the source to get see the code.
This has inserted a form and a text input in your page. Notice that I have put an id="passText" in the input element. This will help you to stylize it through CSS. Now here is the CSS part.

#loginForm [
background: url(images/passText.jpg) no-repeat;
/* where passText.jpg is the stylish box image */
height: 20px;
width: 100px;
font-weight: normal;
color: #ffffff;
border: 0px;
}

#passText {
width: 80px;
height: 18px;
margin-left: 18px;
background: transparent;
color: #ffffff;
}


Now this will transform your input box just as you wished and seen in the picture. The form has the image for the text input in its background, and the input text's background is transparent. The size of the input text is made smaller than the form, so that the texts typed inside the input don't come out of the designed box.

This is the basis of form designing and in this pattern you can make your forms look beautiful and totally matching your site's theme, which adds beauty to your site. Now make designer forms and inputs and attract users to use them more and more.