输入字段上不需要的内部框阴影

Question

我想在input区域应用两个90度角的阴影，所以我希望阴影只在顶部和底部边框处，而不是在左右边框处。 相反，左边有一个黑暗的插入阴影，我无法摆脱（见小提琴 ）。 有任何想法吗？

Answer 1

你不想要的是什么意思？ 你正在使用inset ，所以如果你想在输入字段之外的顶部和左边阴影做这样的话

演示

CSS

input{
    margin: 20px;
    width: 150px;
    height: 30px;
    border-radius: 10px;
    -moz-box-shadow: -5px -5px 5px #888;
    -webkit-box-shadow: -5px -5px 5px #888;
    box-shadow: -5px -5px 5px #888;
    outline: none;
    border: 1px solid #dddddd;
}

如果你想inset顶部和底部，请像这样做

插入顶部底部演示

CSS

input{
    margin: 20px;
    width: 150px;
    height: 30px;
    border-radius: 10px;
    box-shadow: inset 0px 11px 8px -10px #888, inset 0px -11px 8px -10px #888;
    outline: none;
    border: 1px solid #dddddd;
}

注意：我已添加边框，但您可以删除