CODEWITHSUNDEEP
htmlcss
user3462803
user3462803

Reputation: 170

Image inside html.textboxfor

I am enhancing the design of my project and I want to add a watermark in my @html.textboxfor. I was able to add it but it's not working on IE 8. So, I would like to add an image inside my @html.textboxfor for the user to know what should be given or typed inside the textbox even if the watermark will not work.

The problem is I can't make it work. I tried CSS I searched from the web but none of it is working.

Here is an example of how it looks. Thanks in advance. example

Upvotes: 0

Views: 1487

Answers (1)

Mohammed Joraid
Mohammed Joraid

Reputation: 6480

There are several ways to accomplish that.

1- is to give the illusion of having an image in an input text field.

2- way is to have a background for the input field.

Method 1:

Take this example:

JS-FIDDLE-DMEO

HTML:

<div class="some-input-parent" style="border: 1px solid #DDD;">
   
      <input class="some-input" style="border: none; "/>   
      <img class="some-input-img"  src="yourImage.png"/>   

</div>

CSS:

.some-input{
width:120px;
}
.some-input-img{
width:15px;
}

.some-input-parent{
  width:140px;
 }

The trick is to have a div or a span that contains an input field, and that div will have the image as well aligned either to the right or left (based on your need).

The width of the span will equal the width of the text field + the width of the image + some extra space for the borders, padding, etc.

Method 2:

Once you set the background, push it to the right by specifying it's position. Then add padding to the input field to give it an outer width so that we prevent the text from overlapping with the image.

JS-FIDDLE-DEMO2

HTML:

<input class="real-input" type="text" />

CSS:

.real-input
{
    background-image: url(youIcon.png");
    background-position: 119px 0;
    background-repeat: no-repeat;
    background-size: 17px auto;
    padding-right: 26px;
    width: 111px;
}

Result:

enter image description here

Upvotes: 1

Related Questions