Javascript 使用占位符属性在输入中加载图标（类型=文本）

我已经使用了下面的代码片段

<input type="text" class="inputtext" style="margin: 2px;" placeholder="Search">

我有自己的字体图标，我想通过占位符在输入中显示图标。如何使用内容在输入中显示图标

我已经参考了下面的堆栈溢出链接

---

但就我而言，我无法实现这一目标。有什么方法可以实现输入中显示字体图标的此链接或任何其他文档链接？

假设您正在谈论向输入中添加字形图标而不是背景图像，则需要使用

：before

或

：after

伪元素来插入和定位一个，但是请注意，这些不适用于

input

元素，因此您需要将

input

包装在

span

中，然后对此应用样式以添加占位符图标。在下面的示例中，我只是在右侧添加了一个小放大镜，不过您可以根据需要进行编辑

（右侧的图标） HTML

（左边的图标） 如果希望图标显示在输入的左侧，则需要一些额外的CSS技巧：

input{
    border:none;
    padding-left:20px;
}
.search {
    display:inline-block;
    position:relative;
    border:1px solid grey;
}
.search:after {
    display:inline-block;
    position:absolute;
    left:3px;
    top:3px;
    color:grey;
    font-family:fontAwesome;
    content:'\f002';
}

（隐藏焦点上的图标） 如果希望在焦点上隐藏图标，只需为输入提供背景色和带焦点和不带焦点的z索引，

：focus

z索引应足够高，以迫使其在图标上方显示

CSS:

检查这个

HTML

---

无

输入：焦点

---

“在我的情况下，我无法实现”。为什么？您的示例中没有

type=“text”

！！！我已将占位符文本设置为“\e66e；搜索”，并且：：-moz占位符：：在{font-family:'webfont'；}之前，但输入将显示为“\e66e；搜索”你想放你自己的图标吗？你的链接应该提供你所需要的一切，演示运行良好，但在我的情况下，我想在执行编辑时隐藏图标

.search{
    display:inline-block;  
    position:relative;
}
.search:after{
    display:inline-block;
    position:absolute;
    right:5px;
    top:5px;
    color:grey;
    font-family:fontAwesome;
    content:'\f002';
}

input{
    border:none;
    padding-left:20px;
}
.search {
    display:inline-block;
    position:relative;
    border:1px solid grey;
}
.search:after {
    display:inline-block;
    position:absolute;
    left:3px;
    top:3px;
    color:grey;
    font-family:fontAwesome;
    content:'\f002';
}

input{
    z-index:0;
    position:relative;
}
.search{
    display:inline-block;  
    position:relative;
}
.search:after{
    display:inline-block;
    position:absolute;
    right:5px;
    top:5px;
    color:grey;
    font-family:fontAwesome;
    content:'\f002';
}
input:focus{
    z-index:99;
}

<input type="text" class="inputtext" placeholder="Search">

input { 
    font-family: 'FontAwesome';
    background-image: url(http://www.levenmetwater.nl/static/global/images/icon-search.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    text-indent: 30px;
}
input:focus {
    background-position: -20px center;
    text-indent: 0;
}