Change look of TextBox control

Question

Is there a way I can change the appearance of a TextBox from its default look to look like this

enter image description here

I searched for creating a custom TextBox but didnt see anything about changing how it looked.

I have the have the image in a PSD i just didnt know if there was a way to replace the default look with this image

I am new to making websites and just using this for learning purposes so I dont really know where to start

You will need to learn basic CSS if you are going to write web applications. You apply stlyle via CSS to your webpage to control virtually any visual aspect of a webpage. Then you could have searched CSS ROUNDED CORNERS and you would have learned about appying a border radius — Gary Walker, Sep 26 '13 at 17:22

Konrad Gadzina · Accepted Answer · 2013-09-26T18:40:22.830

1

You should use CSS to achieve this. What you need to do is to style it. Here are some nice examples that could help you.

Here is the one that shows how to add background image:

.tb11 {
    background:#FFFFFF url(images/search.png) no-repeat 4px 4px;
    padding:4px 4px 4px 22px;
    border:1px solid #CCCCCC;
    width:230px;
    height:18px;
}

edited Sep 26 '13 at 18:40

answered Sep 26 '13 at 17:22

Konrad Gadzina

3,407
1
18
29

score 0 · Answer 2 · answered Sep 26 '13 at 17:24

0

You can create a custom asp.net text box control and wrap oob asp.net text box with necessary html (a label or span) and css to style it like the way you want. That control will become reusable and you would be able to use it on any of your pages.

answered Sep 26 '13 at 17:24

Himanshu Kumar

541
5
14

score 0 · Answer 3 · answered Sep 26 '13 at 17:25

If you want an easy way to do it, just load easy to use bootstrap framework and include the needed file to your project.

Than just add the right class to your control and here it is !

Also, the docs is really complete and simple

http://getbootstrap.com/components/#input-groups

score 0 · Answer 4 · answered Sep 26 '13 at 17:27

An asp.net TextBox is really just an input with the type="text".

You can do something like this using stylesheets:

CSS:

input[type=text].styled1
{
    background: url(http://myUrl.com/Username.jpg);
    border:0;
    color: gray;
    height: 23px;
    padding-left:10px;
    width: 200px;
}

XHTML:

<asp:Textbox id="txtUsername" runat="server" CssClass="styled1" />

Change look of TextBox control

4 Answers4