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。

根据datepicker图片尺寸调整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或输入）。你可以添加另一个可以表现得像的html元素 - 我假设你想要一个符合你想要的img。

在输入结尾插入图标

2 个答案: