What is the best practice for placing the icon to the right of the text input field

Question

I want to place an icon on the right side of the text input. I would use a background image with the following CSS setting:

input[type=text].dropdown {
  bachground-image: /images/down.png
  background-repeat: no-repeat;
  background-position: right center;
}

I foresee the following problems:

• the text that I put in the input will overlap the image unless I make a few additional input styles based on the size of the image (if the size is not predictable, it will be a real headache!)

• if the input size changes - I will have to scale the image myself

• if I need to put another image on the left, I can’t do it

Are there any more efficient methods to do such a thing?

Answer 1

, , , ,

padding-right , "" background-image. , , ....

, , "-", , ( ) ? , , , ? , -.

, , !

? - , , . , , , .

, -

, . , . , , , , .

if ,

- ? , , , , ?

CSS3, IE8 . : http://caniuse.com/multibackgrounds

, (, , " " )? .

Answer 2

w3d . "if", , . , , ( , ), .

, ,

JSFiddle Demo

, , 6 .. :

• , , .
• - , , != 0, ,

, .

HTML

<div class="form-group">
<label for="txtDate">LABEL</label>
    <input type="text" class="txtcalendar" id="txtDate" placeholder="E.g. mm/dd/yyyy" />
    <span>
       <img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
       <img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
    </span>
</div>