【问题标题】：load icon in input(type=text) using placeHolder attribute使用 placeHolder 属性在输入（类型=文本）中加载图标
【发布时间】：2014-04-25 17:40:45
【问题描述】：

我使用了下面的代码sn-p

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

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

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

stackoverflow link

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

【问题讨论】：

“在我的情况下我无法实现”。为什么？
你的例子中没有type="text"!!!
我已将占位符文本设置为 "\e66e; Search" 以及 ::-moz-placeholder::before{font-family:'webfont';} 但输入将显示为 "\ e66e;搜索”而不是图标
你想放你自己的图标吗？
该链接应该为您提供所需的一切

标签： javascript html css placeholder

【解决方案1】：

假设您要在输入中添加字形图标而不是背景图像，您将需要使用 :before 或 :after 伪元素来注入和定位一个，但请注意，这些不是可用于input 元素，因此您需要将input 包装在例如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;
}

【讨论】：

提供的演示工作正常，但在我的情况下，我想在执行编辑时隐藏图标

【解决方案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

【讨论】：