2

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/

1
  • nope. i still get the inner shadow Commented Jun 13, 2011 at 7:40

2 Answers 2

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)

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

Comments

2

Replace

border-color:#cccccc;

with

border: 1px solid #cccccc;

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.