使用placeHolder属性在输入（type = text）中加载图标

Question

我使用了以下代码段

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

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

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

stackoverflow link

但在我的情况下我无法实现。有没有办法在输入中实现这个或任何其他文档链接显示字体图标？

Answer 1

假设您正在谈论在输入中添加字形图标而不是背景图像，则需要使用:before或:after伪元素来注入和定位一个，但是请注意，这些元素不适用于input元素，因此您需要将input包含在内，例如a span，然后对其应用样式以添加占位符图标。在下面的示例中，我只是在右侧添加了一个小放大镜，但您可以根据需要进行编辑。

Demo Fiddle（右侧图标）

HTML

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

CSS

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

Demo Fiddle（左侧图标）

如果您希望图标显示在输入的左侧，则需要一些额外的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';
}

Demo Fiddle（隐藏焦点上的图标）

如果你想隐藏焦点上的图标，你只需要给输入一个背景颜色和一个有和没有焦点的z-index，:focus z-index应该足够高以强制它正面显示图标。

CSS：

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

Answer 2

检查此 demo jsFiddle

HTML

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

CSS

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

---

没有input:focus 的 demo jsFiddle