Search code examples
htmlcssbackground-image

How to add two images one in the right and other in the left side of the input textbox?

I've the following tags

<input id="date" class="mandatory datepicker" type="date" name="Date"></input>
 <input id="name" class="mandatory" type="text" name="Name"></input>

What I want to do is to have a common CSS background image for two fields on the left side which I am able to do using the mandatory class and have an unique CSS background image on the right side for the date field using datepicker class along with the common CSS.

What I want is enter image description here

What I get is enter image description here

So can I do that?

Below are the CSS codes which I tried but couldn't get what I wanted.

.mandatory {
    background: #FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png) no-repeat 4px 4px;
    background-position: left;
}

.mandatory.datepicker {
    background: #FFFFFF url(http://upload.wikimedia.org/wikipedia/commons/9/99/Dot1.png) no-repeat 4px 4px;
    background-position: right;
    }

Is the datepicker image overlapping the mandatory image? If so how do I solve this issue?

Fiddle: http://jsfiddle.net/kumareloaded/aybghsfp/

Solution

  • Thanks all for your valuable inputs. I was able to get the solution by using the following CSS.

    .mandatory {
    background: #FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png) no-repeat 4px 4px;
    background-position: left;
}

.mandatory.datepicker {
    background-image: url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png), url(http://upload.wikimedia.org/wikipedia/commons/9/99/Dot1.png);
    background-repeat: repeat-y;
    background-position: left, right;
}

    Fiddle: http://jsfiddle.net/kumareloaded/jcpLp492/