输入图标上的占位符和文本答案

【问题标题】：placeholder and text over the icon of a input输入图标上的占位符和文本
【发布时间】：2015-11-02 19:33:49
【问题描述】：

我正在创建一个表单，我想在输入文本中放置一个图标，但是在预览时，文本被放置在图标上，我不知道如何修复它

html 看起来像这样

 <div id="name"> <input type="text" name="username" placeholder="Nombre"> </div>

还有 css

#name{
    float:left;
}
#name input {
  font:'Montserrat', sans-serif;
  font-weight:700;
  font-size:24px;
  border-radius: 2.5px;
  border: 5px solid #000;
  background-color:transparent;
  color:#56828B;
  width:300px;
  height:30px;
  background-image:url(../imgs/nameicon.png);
  background-repeat:no-repeat;
}

::-webkit-input-placeholder {
   color:#56828B;
   padding-left:5px;
}

谢谢

【问题讨论】：

标签： html css forms input icons

【解决方案1】：

您实际上不需要图像。试试下面的方法，问题就不会再出现了：

#name {
  font:'Montserrat', sans-serif;
  font-weight:700;
  font-size:24px;
  border-radius: 2.5px;
  border: 5px solid #999;
  color:#56828B;
  width:240px;
  height:30px;
  background-repeat:no-repeat;
   position: relative;
  padding-left: 50px; /* makes space for the icon */
  
}


#name:after {
  content: '\f095';
  font-family: fontAwesome;
  position: absolute;
  left: 8px;
  top: 5px;
  font-size: 20px;
  color: #999
  
  }
input:focus, input:active {
  
  outline: 00;
  
  }


#name input {
  border: none!important;
  width: 100%;
  background-color:transparent;
   color:#56828B;
  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="name"> <input type="text" name="username" placeholder="Nombre"> </div>

注意：这只是一个示例，请根据您的需要进行调整。

See this tutorial here

【讨论】：