CODEWITHSUNDEEP
htmlcss
Imnotapotato
Imnotapotato

Reputation: 5808

How to display more than one image in an <input type="text">

I have am <input type="text"> using 

background: #e3e3e6 url(search.jpg) no-repeat 7px 2px;

on the left side.

I want to add an other image on the other side of the text box. (right side). What is the best way to do it?

Upvotes: 1

Views: 265

Answers (1)

Nico O
Nico O

Reputation: 14102

You may use multiple background images on the element, just like this:

html (use the class attribute to seperate the elements with and without backgrounds)

<input type="text" />

Sample CSS:

input[type="text"] {
    background: url(http://www.placehold.it/20x20&text=left), url(http://www.placehold.it/20x20&text=right);
    background-repeat: no-repeat, no-repeat;
    background-position: center left, center right;
}

Here is a demo: http://jsfiddle.net/oLd7zdf7/

Upvotes: 6

Related Questions