CSS 输入框的插入框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12140961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
inset box-shadow for inputfield
提问by user1026090
Can an inset box-shadow work on an inputfield?
插入框阴影可以在输入字段上工作吗？
JsFiddle: http://jsfiddle.net/hKTq2/
JsFiddle：http: //jsfiddle.net/hKTq2/
回答by Kyle
Yes, this is something I was working on the other day, it is indeed possible.
是的，这是我前几天正在做的事情，确实有可能。
input
{
box-shadow:inset 0 0 5px 5px #888;
background: #fff;
}
You just need to have a background set for the shadow to fall onto :)
您只需要为阴影设置背景即可：)
回答by dariodev
In the meantime, this has become a common, though here's my "the perfect inset input".
与此同时，这已经成为一种普遍现象，尽管这是我的“完美的插入输入”。
input {
background: #fff;
color: #525865;
border-radius: 4px;
border: 1px solid #d1d1d1;
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
font-family: inherit;
font-size: 1em;
line-height: 1.45;
outline: none;
padding: 0.6em 1.45em 0.7em;
-webkit-transition: .18s ease-out;
-moz-transition: .18s ease-out;
-o-transition: .18s ease-out;
transition: .18s ease-out;
}
input:hover {
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}
input:focus {
color: #4b515d;
border: 1px solid #B8B6B6;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
body {
background: #fff;
margin: 20px;
}<input type="text" />回答by darma
Yes you need to add :
是的，您需要添加：
background-color:transparent;
回答by supersaiyan
Hi ADD this css then you able to insert shadow
嗨添加这个css然后你就可以插入阴影
.innershadow{ -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px#888; box-shadow: inset 0 0 5px 5px #888; height:15px; background-color:transparent; height:50px}
回答by Hyman
Just add background:none;on class .innershadow
加班background:none;就行.innershadow
回答by hennson
you could do something like this to realize a inset dropshadow inside the text-input:
你可以做这样的事情来实现文本输入内的插入阴影：
.innershadow {
font-size: 16px;
color: #999;
padding: 6px;
-moz-box-shadow:inset 2px 2px 5px #888;
box-shadow:inset 2px 2px 5px #888;
border: 1px solid #b8b8b8;
}
HTH,
哈，
--hennson
--亨森
