在 <input> 上使用 fontawesome 图标作为背景时出现问题
Problems with using fontawesome icons as background on <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;
}
HTML 元素,如 input 和 img 被认为是 empty。它们中没有内容,因此它们不能具有 :before
或 :after
属性,因为没有任何内容可包装。
您可能会考虑在代码中使用 <label>
,如下所示:
<label class="mod-inp"><input type="text" /></label>
并将图标应用于标签。这样,单击 label/icon 仍会将焦点放在子输入元素上。
如标题所述,我希望在我的 <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;
}
HTML 元素,如 input 和 img 被认为是 empty。它们中没有内容,因此它们不能具有 :before
或 :after
属性,因为没有任何内容可包装。
您可能会考虑在代码中使用 <label>
,如下所示:
<label class="mod-inp"><input type="text" /></label>
并将图标应用于标签。这样,单击 label/icon 仍会将焦点放在子输入元素上。