Custom input textbox

Question

I am trying to use multiple background images to customise an input box but for some reason the background image doesn't work.

What I am trying to achieve is this:

The multiple background images are:

Any help is highly appreciated.

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

Don't hide half your code on another site. Put a complete question in your question. — Quentin
– Quentin, Commented Jan 19, 2017 at 12:14

Akshay · Accepted Answer · 2017-01-19 12:16:10Z

2

Show the icon first, then the bg and then the hex background

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

answered Jan 19, 2017 at 12:16

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom input textbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related