Input Field Styling - CSS problem

Question

i am trying to create an input box like below

enter image description here

These are the rules i have 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 am getting an inner box shawdow like this.

enter image description here

Any idea how to remove that inner shawdow ?

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

nope. i still get the inner shadow

Harsha M V
– Harsha M V

2011-06-13 07:40:07 +00:00
Commented Jun 13, 2011 at 7:40 — Harsha M V
– Harsha M V, Commented Jun 13, 2011 at 7:40

Teneff · Accepted Answer · 2011-06-13 07:50:45Z

7

try replacing:

border-color:#cccccc;

with:

border: 1px solid #cccccc;

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

edited Jun 13, 2011 at 7:50

answered Jun 13, 2011 at 7:42

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom · Accepted Answer · 2011-06-13 07:42:49Z

2

Replace

border-color:#cccccc;

with

border: 1px solid #cccccc;

answered Jun 13, 2011 at 7:42

Tom

1,3396 silver badges15 bronze badges

Collectives™ on Stack Overflow

Input Field Styling - CSS problem

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related