Different Style in HTML Text Field

CSS Text Box Element

CSS Code

/* Text Box with Different Border: */
.tb-border {
border: 1px solid #0000FF;
}

/* Text Box with Background Color: */
.tb-background {
background-color : #99FFCC;
border: 1px solid #008000;
}

/* Text Box with Background Image: */
.tb-bg-image {
background-image: url(bg.png);
border: 1px solid #6297BC;
}

/* Text Box with Focus: */
.tb-focus {
border: 1px solid #888377;
}
.tb-focus:focus {
background-color: #F4EEDD;
}

/* Text Box with Side Image: */
.tb-bg-side {
background-image: url(Portal.gif);
background-repeat:no-repeat;
background-position:left;
border: 1px solid #6297BC;
padding-left:16px;
}

/* Text Box with Rounded Corners: */
.tb-rounded {
border:0;
background: transparent url(rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
padding-top:2px;
}

/* Text Box with Gradient: */
.tb-gradient {
border:0;
background: transparent url(gradient.gif) no-repeat top left;
height: 22px;
width: 230px;
padding-top:2px;
}

Source: http://www.cssportal.com/form-elements/text-box.htm
Demo: View Demo