Insert icon in the end of input

Question

I have the following HTML code for an input field:

<div class="col-md-6">
    <div class="form-group number">
        <label for="addEventstart">Start date</label>
        <input type="text" class="signup-input  eventStartDate" id="addEventstart" required name="startDate" placeholder="DD.MM.YYYY">
    </div>
</div>

For putting an icon in the end of the field I use the following CSS:

.number input::after {
    content: url(../events/datepicker.png);
    display: inline-block;
    width: 14px;
    height: 15px;
    position: absolute;
    top: 32px;
    right: 22px;
}

For some reason the icon is not displayed

Answer 1

Use below css.

Adjust background-position as per datepicker image dimension.

.number input {
    background-image: url(../events/datepicker.png);
    display: inline-block;
    width: 123px;
    height: 21px;
    background-repeat: no-repeat;
    background-position: 96px 0;
    vertical-align: middle;
}

Demo: https://jsfiddle.net/q02oaLrf/