Inner glow to input box using css

Question

I am trying to add inner glow to a input box. I have added box-shadow but I am not seeing any effect for right and bottom border.

The output I would like to see is --

Html code --

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

<div class="login-block2 key_text_show ">
  <form>
    <input value="" placeholder="Username" id="username2" type="text">
  </form>
</div>

Demo -- https://jsfiddle.net/squidraj/gmoo6npu/2/

In the demo the first box is using css and second box is an image. There is a difference between these two. The css one is not having the right and bottom glow where the image has. I can't find a way how to add that glow.

Any help is highly appreciated.

Answer 1

You can reset your box shadow on the first input:

box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5) inset, inset -1px -1px 1px -1px rgba(255,255,255,0.3); .

*,
*:before,
*:after {
  box-sizing: border-box;
}

.login-block {
  background: #323537 none repeat scroll 0 0;
  display: block;
  width: 35%;
  margin-bottom: 2rem;
}

.login-block2 {
  background: #323537 none repeat scroll 0 0;
  display: block;
  width: 35%;
}

.login-block form,
.login-block2 form {
  padding: 2rem 2rem 1rem;
}

input#username {
  background: #2b2e30 url("https://s29.postimg.org/d4nsrog5z/index.jpg") no-repeat scroll 10px 10px / 30px 25px;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5) inset,inset  -1px -1px 1px -1px rgba(255,255,255,0.3);
}

input {
  border: medium none;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5) inset;
  box-sizing: border-box;
  color: #9c9b9b;
  display: block;
  font-size: 14px;
  height: 41px !important;
  margin-bottom: 20px;
  padding: 0 20px 0 50px;
  width: 100%;
}

.login-block2 input#username2 {
  background: #2b2e30 url('https://s24.postimg.org/bxtkaxzhh/username.jpg') no-repeat;
  background-size: cover;
  background-position: left top;
}

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

<div class="login-block2 key_text_show ">
  <form>
    <input value="" placeholder="Username" id="username2" type="text">
  </form>
</div>

Answer 2

Do you want the glow to be always displayed, or only on input focus? I think the second option would fit better.

Always glow

Add the following attribute to your input#username rule:

  -webkit-box-shadow: inset 0 0 5px #000;
  -moz-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;

*,
*:before,
*:after {
  box-sizing: border-box;
}
.login-block {
  background: #323537 none repeat scroll 0 0;
  display: block;
  width: 35%;
  margin-bottom: 2rem;
}
.login-block2 {
  background: #323537 none repeat scroll 0 0;
  display: block;
  width: 35%;
}
.login-block form,
.login-block2 form {
  padding: 2rem 2rem 1rem;
}
input#username {
  background: #2b2e30 url("https://s29.postimg.org/d4nsrog5z/index.jpg") no-repeat scroll 10px 10px / 30px 25px;
  -webkit-box-shadow: inset 0 0 5px #000;
  -moz-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
}
input#username:focus {
  outline: none;
  /* Newer versions of Chrome has input outline on focus */
}
input {
  border: medium none;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5) inset;
  box-sizing: border-box;
  color: #9c9b9b;
  display: block;
  font-size: 14px;
  height: 41px !important;
  margin-bottom: 20px;
  padding: 0 20px 0 50px;
  width: 100%;
}
.login-block2 input#username2 {
  background: #2b2e30 url('https://s24.postimg.org/bxtkaxzhh/username.jpg') no-repeat;
  background-size: cover;
  background-position: left top;
}

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

<div class="login-block2 key_text_show ">
  <form>
    <input value="" placeholder="Username" id="username2" type="text">
  </form>
</div>

Glow only on focus

Add the following rule to your code:

input#username:focus {
  -webkit-box-shadow: inset 0 0 5px #000;
  -moz-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  outline: none; /* Newer versions of Chrome has input outline on focus */
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.login-block {
  background: #323537 none repeat scroll 0 0;
  display: block;
  width: 35%;
  margin-bottom: 2rem;
}

.login-block2 {
  background: #323537 none repeat scroll 0 0;
  display: block;
  width: 35%;
}

.login-block form,
.login-block2 form {
  padding: 2rem 2rem 1rem;
}

input#username {
  background: #2b2e30 url("https://s29.postimg.org/d4nsrog5z/index.jpg") no-repeat scroll 10px 10px / 30px 25px;
}

input#username:focus {
  -webkit-box-shadow: inset 0 0 5px #000;
  -moz-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  outline: none; /* Newer versions of Chrome has input outline on focus */
}

input {
  border: medium none;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5) inset;
  box-sizing: border-box;
  color: #9c9b9b;
  display: block;
  font-size: 14px;
  height: 41px !important;
  margin-bottom: 20px;
  padding: 0 20px 0 50px;
  width: 100%;
}

.login-block2 input#username2 {
  background: #2b2e30 url('https://s24.postimg.org/bxtkaxzhh/username.jpg') no-repeat;
  background-size: cover;
  background-position: left top;
}

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

<div class="login-block2 key_text_show ">
  <form>
    <input value="" placeholder="Username" id="username2" type="text">
  </form>
</div>

A few notes

• I have added the outline: none attribute when the input element is on focus. This is required for newer browsers (such as Chrome), which puts automatically a blue outline to inputs when they have focus.
• Keep in mind that box-shadow is implemented in CSS3. Check the compatibility across various browser versions at CanIUse. You can learn more about this attribute at CSS-Tricks and MDN.