CODEWITHSUNDEEP
cssicons
Sarit Rotshild
Sarit Rotshild

Reputation: 391

Insert icon in the end of input

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

Upvotes: 4

Views: 16686

Answers (2)

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

Pseudo content can only be added to containing elements (that has a beggining and an ending tag), and not on self-closing ones (like img or input). You can add another html element that can behave like - I assume you want an img, that behave as you want.

Upvotes: 2

Samir Selia
Samir Selia

Reputation: 7065

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/

Upvotes: 4

Related Questions