html - 自定义输入文本框

我正在尝试使用多个背景图像来自定义输入框，但是由于某些原因，背景图像无法正常工作。

我想要实现的是：



多个背景图像是：






非常感谢您的帮助。

.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>

最佳答案

首先显示图标，然后显示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>

关于html - 自定义输入文本框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41741515/