在输入框末尾插入图标

Question

我有一个输入框的HTML代码如下：

<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>

为了在字段末尾放置一个图标，我使用以下CSS：

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

由于某些原因，图标未显示。

- Sarit Rotshild

---

输入不支持伪类。 - Vitorino fernandes

请使用 background-image 替代。 - Vitorino fernandes

您的HTML片段中缺少“event-form”。 - slartidan

@Vitorino Fernandes 而不是内容？ - Sarit Rotshild

Answer 1

请使用以下CSS样式。

根据日期选择器图像的尺寸调整background-position。

.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/

- Samir

Answer 2

伪内容只能添加到包含元素（具有开始和结束标记的元素）中，而不能添加到自闭合元素（如img或input）中。 您可以添加另一个HTML元素，该元素可以像您想要的那样行为-我假设您想要一个像img一样的元素，其行为符合您的需求。

- Dan Ovidiu Boncut