自定義輸入文本框

我想使用多個背景圖像來自定義輸入框，但由於某種原因，背景圖像不起作用。自定義輸入文本框

我想實現的是：

的多個背景圖像：

任何幫助表示高度讚賞。

.login-block input#username { 
 
    background: #2b2e30 url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat, url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') left 10px no-repeat; 
 
    background-size: 100% 41px; 
 
    background-position: left top; 
 
} 
 
.login-block input { 
 
    border: medium none; 
 
    box-sizing: border-box; 
 
    color: #9c9b9b; 
 
    display: block; 
 
    font-size: 14px; 
 
    height: 41px !important; 
 
    margin-bottom: 20px; 
 
    padding: 0 20px 0 50px; 
 
    width: 100%; 
 
}

<div class="login-block"> 
 
    <input value="" placeholder="Username" id="username" type="text"> 
 
</div>

來源

2017-01-19 Prithviraj Mitra

不要隱藏在其他網站上一半的代碼。在你的問題中提出一個完整的問題。 – Quentin

第一顯示的圖標，然後在BG，然後六角背景

.login-block input#username { 
 
    background:url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') 41px 41px no-repeat,url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat,#2b2e30; 
 
    background-position:10px center, left center; 
 
} 
 

 
.login-block input { 
 
    border: medium none; 
 
    box-sizing: border-box; 
 
    color: #9c9b9b; 
 
    display: block; 
 
    font-size: 14px; 
 
    height: 41px !important; 
 
    margin-bottom: 20px; 
 
    padding: 0 20px 0 50px; 
 
    width: 100%; 
 
}

<div class="login-block"> 
 
    <input value="" placeholder="Username" id="username" type="text"> 
 
</div>

來源

2017-01-19 12:16:10 Akshay

非常感謝Akshay。像魅力一樣工作。 –

不客氣@PrithvirajMitra – Akshay

自定義輸入文本框

回答

相關問題