佔位符和輸入圖標上的文本

我正在創建一個表單，我想將圖標放入輸入文本中，但是當涉及到預覽文本時，將放在圖標上，我不知道如何解決它佔位符和輸入圖標上的文本

的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

佔位符和輸入圖標上的文本

回答

相關問題