Field input styles - CSS issue

Question

I am trying to create an input field as shown below

These are the rules that I attached

input { height:30px; width:286px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; border-color:#cccccc; padding:0 10px; } 

But I get an inner shawdow box like this.

Any idea how to remove this inner shawdow?

Internet Editor: http://jsfiddle.net/c3JCx/

Answer 1

try replacing:

 border-color:#cccccc; 

from:

 border: 1px solid #cccccc; 

this will make the border with a solid color, as shown in the first image ... by default, border-style is inset and it looks like "3D", as described in w3schools (second image)

Answer 2

Replace

 border-color:#cccccc; 

from

 border: 1px solid #cccccc;