Unwanted Inner box-shadow on input field

Question

I want to apply two box-shadows with a 90 degree angle to my input field, so I expect the shadows to be only at the top and bottom borders, but not at the left and right borders. Instead, there is a dark inset shadow on the left that I can't get rid of (see Fiddle). Any ideas?

Answer 1

What do you mean by unwanted? you are using inset,so if you want top and left shadow outside of your input field do it like this instead

Demo

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

And if you want to give inset to just top and bottom do it like this

Inset Top Bottom Demo

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

Note: I've added borders, you can remove though