Unwanted inner shadow in input field

Question

I want to apply two rectangles with a 90 degree angle to the input field, so I expect that the shadows will only be in the upper and lower borders, but not in the left and right borders. Instead, there is a dark shadow insertion on the left that I cannot get rid of (see Fiddle ). Any ideas?

Answer 1

What do you mean by junk? you use inset , so if you want the top and left shadow outside the input field to do it like this,

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 only top and bottom, do it like this:

Paste the 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 have added borders, you can delete though