我正在尝试向输入框添加内发光。我添加了 box-shadow 但我没有看到对右边框和底边框有任何影响。
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 没有图像所具有的右侧和底部发光。我找不到添加那种光晕的方法。
非常感谢任何帮助。
最佳答案
您可以在第一次输入时重置您的框阴影:
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5) 插图,
插图 -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>
关于html - 使用 css 对输入框进行内部发光,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41778430/