使用css对输入框进行内部发光

时间:2017-01-21 10:47:41

标签: html css

我正在尝试将内部发光添加到输入框中。我添加了box-shadow但是我没有看到右边框和底边框的任何效果。

我希望看到的输出是 - enter image description here

Html代码 -

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

演示 - https://jsfiddle.net/squidraj/gmoo6npu/2/

在演示中,第一个框使用css,第二个框是图像。这两者之间存在差异。 css没有图像所具有的右下发光。我找不到如何添加光晕的方法。

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:2)

您可以在第一个输入上重置框阴影:

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

&#13;
&#13;
*,
*: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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您希望始终显示发光,还是仅显示输入焦点?我认为第二种选择会更合适。

始终发光

将以下属性添加到input#username规则中:

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

仅在焦点上发光

将以下规则添加到您的代码中:

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>

一些注释

  • 我在输入元素处于焦点时添加了outline: none属性。这对于较新的浏览器(例如Chrome)是必需的,当它们具有焦点时,它会自动为输入添加蓝色轮廓。
  • 请记住,box-shadow是在CSS3中实现的。检查CanIUse处各种浏览器版本之间的兼容性。 您可以在CSS-TricksMDN
  • 了解有关此属性的详情