Textbox with background image using CSS

Share |

We can use CSS To make stylish textboxes like rounded corner textbox or textbox with some image inside. Rounded corner text box is like following image.

To make rounded corner textbox we use following logic. We will put textbox in some wrapper layer i.e. div tag and apply style to wrapper layer.

Now style applied to wrapper div tag is as follows

.tt-wrapper
 {
 background-image:url('images/user_box.png');
 margin:0;
 width:255px;
 height:35px; 
  }

In above style user_box.png is a background image (check following image.)

 Then we apply style to fit the textbox with in wrapper div class.

.tt{
 width:240px;
 height:25px;
 margin:5px 0 0 8px;
 border:none;
 background:none;
 }

And we are done with Textbox with rounded corner. To display some image inside textbox we simply need to add background image in the class applied to textbox