Field input styles - CSS issue

I am trying to create an input field as shown below

enter image description here

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.

enter image description here

Any idea how to remove this inner shawdow?

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

+2
css
source share
2 answers

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)

+7
source share

Replace

 border-color:#cccccc; 

from

 border: 1px solid #cccccc; 
+2
source share

All Articles