Question

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

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

感谢

Answer 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

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

1 个答案: