我尝试了这里发布的可能解决方案,但是没有一个可以在我的代码中使用,这是我的代码:
<div class="search">
<span class="fa fa-user"></span>
<input placeholder="Username...">
</div>
<div class="search">
<span class="fa fa-lock"></span>
<input placeholder="*******">
</div>
CSS
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body { margin: 30px; }
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input { text-indent: 32px;}
我希望占位符前面有一个图标。 这里是示例代码。