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

Question

我有以下标签

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

我想要做的是为左侧的两个字段创建一个通用的CSS背景图像，我可以使用强制类，并使用datepicker类在右侧为日期字段提供唯一的CSS背景图像以及常见的CSS。

我想要的是

我得到的是

我可以这样做吗？

以下是我尝试过的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: #FFFFFF url(http://upload.wikimedia.org/wikipedia/commons/9/99/Dot1.png) no-repeat 4px 4px;
    background-position: right;
    }

datepicker图像是否与强制图像重叠？如果是这样，我该如何解决这个问题？

小提琴：http://jsfiddle.net/kumareloaded/aybghsfp/

Answer 1

由于评论而更新

input{position: relative}
.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;
    text-indent: 4px
    }
.mandatory.datepicker:before {
    content:'';
    position: absolute;
    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;
    width: 12px;
    height: 14px;
    top: 2px;
}

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

更新：将您的标记更改为此（因为打字原因，他们必须在框外）

*{box-sizing: border-box; padding: 0; margin: 0}
form{
    padding: 40px
}
[class=name]{
    margin: 0 20px 0 80px
}
[class=date],[class=name],[class=submit]{
    display: inline-block;
    width: 160px;
    height: 40px;
    position: relative
}
input[id=name],input[id=date]{
    width: 100%
}

[type=submit]{
    width: 100%;
    padding: 10px 0;
    
}
label[for=date],label[for=name]{
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: -32px;
    top: 2px;
    border-radius: 50%
}
[class=date]:before{
    content:'';
    position: absolute;
    right: -32px;
    top: 2px;
    background: yellow;
    width: 16px;
    height: 16px;
    border-radius: 50%
}
input:valid + label[for=date],input:valid + label[for=name]{
    background: green
}

input:invalid + label[for=date],input:invalid + label[for=name]{
    background: red
}

<form>
    <div class=date>
        <input id=date class="mandatory datepicker" type=date name=Date required />
        <label for=date></label>
    </div>
    
    <div class=name>
        <input id=name class=mandatory type=text name=Name required />
        <label for=name></label>
    </div>
    <div class=submit>
        <input type=submit value=validate />
    </div>
</form> 

你不能轻易地输入样式，这就是为什么你应该使用标签，因为它们在一起

label{
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    cursor: pointer; margin-right: 10px
}
label[for=date]:after{
    background: red
}
label[for=name]:after{
    background: green
}
label:after{
    content: '';
    position: absolute;
    top: 10px;
    left: 0px;    
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 4px solid #333
}

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

Answer 2

使用这样的东西

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

Answer 3

你可以通过对两个图像使用display:inline-block属性来做到这一点。

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

Answer 4

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

小提琴：http://jsfiddle.net/kumareloaded/jcpLp492/

Answer 5

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