Html 如何在输入文本框的右侧和左侧分别添加两个图像？

我有以下标签

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

日期选择器图像是否与强制图像重叠？如果是，我如何解决这个问题

---

Fiddle:

您可以使用两个图像的

显示：内联块

属性来完成此操作

.mandatory {
    background: #FFFFFF url(../images/mandatory.png) no-repeat 4px 4px;
    background-position: left;
    display:inline-block;
}

.mandatory.datepicker {
    background: #FFFFFF url(../images/datepicker.png) no-repeat 4px 4px;
    background-position: right;
    displya:inline-block;
    }

---

用这样的东西

.mandatory {
    background: #FFFFFF url(../images/mandatory.png) no-repeat 4px 4px;
    background-position: left;
    display:inline-block;
    position:relative;
}

.mandatory.datepicker:after {
    content:'';
    display:block;
    width:10px; /*Change accordinlgly*/
    height:10px; /*Change accordinlgly*/
    position:absolute;
    top:5px; /*Change accordinlgly*/
    right:5px; /*Change accordinlgly*/
    background: url(../images/datepicker.png) no-repeat;
}

---

因评论而更新

输入{位置：相对}
.强制性{
背景：#FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png)不重复4px 4px；
背景位置：左；
}
.mandate.datepicker{
背景：#FFFFFF url(http://upload.wikimedia.org/wikipedia/commons/9/99/Dot1.png)不重复4px 4px；
背景位置：右；
文本缩进：4px
}
.必须。日期选择器：在{
内容：''；
位置：绝对位置；
背景：#FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png)不重复4px 4px；
背景位置：左；
宽度：12px；
高度：14px；
顶部：2个；
}

---

感谢大家的宝贵意见。 我能够通过使用以下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;
}

---

小提琴手：

我不明白你想要什么，你能把最后的结果画出来吗？你可能需要标签或家长来包装我已经附上了一张图片。请看一看。图像上的输入在哪里？对不起，你这是什么意思？我的意思是你使用了两个输入，但在图像上我只能看到一个有两个背景图像红色和绿色。这是你的标记看起来像感谢，但我需要的是有两个图像内的文本框（日期）日期和只有一个图像内的文本框（文本）感谢你的努力，但我仍然觉得这有点太复杂了，比我想要的。我提供了一把小提琴。以及文本框外观的示例图像。请看一看。谢谢，我仍然看不到你小提琴上第一个文本框中的两个图像。顺便说一句，我已经弄明白了，而且很简单。在这里查看我的答案。无论如何，非常感谢您的时间和努力。：）

.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;
}

.input {
    background: url(assets/Symbol39-2-min.png) no-repeat right center, 
                url(assets/Symbol38-2-min.png) no-repeat left center;
}