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

我正在创建一个表单，我想将图标放入输入文本中，但是当涉及到预览文本时，将放在图标上，我不知道如何解决它占位符和输入图标上的文本

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

感谢

来源

2015-11-02 isxbellle

你其实不需要一个图像。试试下面的方法，绝不会再次出现此问题：

#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

来源

2015-11-02 19:44:56

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

回答

相关问题