css - 不要な内箱-入力フィールドの影

Question

フィールドに90度の角度で2つのボックスシャドウを適用したいinputので、シャドウは上下の境界にのみ存在し、左右の境界には存在しないと予想します。代わりに、左側に私が取り除くことができない暗いはめ込み影があります（フィドルを参照）。何か案は？

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

注：境界線を追加しましたが、削除することはできます