在输入末尾插入图标

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

由于某些原因图标没有显示

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

演示：https://jsfiddle.net/q02oaLrf/

Answer 2

伪内容只能添加到包含元素（具有开始和结束标记），而不能添加到自关闭元素（如 img 或 input）。您可以添加另一个 html 元素，其行为类似于 - 我假设您想要一个 img，其行为如您所愿。

在输入末尾插入图标

Insert icon in the end of input

css

icons