html - 在<input>上使用真棒字体图标作为背景的问题

如标题所述，我想在我的<input>元素上添加超棒的字体图标作为背景。由于某种原因，它不起作用。我的代码是：

HTML：

<input class="mod mod-inp inp-alr" placeholder="This is an alert"/>

CSS：

.mod-inp {
    position: relative;
}

.mod-inp:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 0;
    left: 10px;
}

最佳答案

输入和img之类的HTML元素被认为是空的。它们中没有内容，因此它们不能具有:before或:after属性，因为没有要包装的内容。

您可能会考虑在代码中使用<label>，如下所示：

<label class="mod-inp"><input type="text" /></label>

并将图标应用于标签。这样，单击标签/图标仍将焦点集中在子输入元素上。