CSS: How to shadow a field like this?

Question

I am trying to style a text input field. So far, I tried to use borders and images as background but that's not a scalable solution. How could I style an input field like the one in the image below?

enter image description here

[This](http://www.css3.info/preview/box-shadow/) will help you — Ron van der Heijden, Feb 11 '13 at 13:52
Have you tried anything so far? Done any research? Look at using a gradient for the border along with an inner `box-shadow`. — Andy E, Feb 11 '13 at 13:53
http://stackoverflow.com/questions/11361075/responsive-input-fields-in-css-fluid-width -- Possible duplicate — Raphael Rafatpanah, Feb 11 '13 at 13:55

score 4 · Accepted Answer · answered Feb 11 '13 at 13:54

4

Use CSS3 box-shadow property. Example:

input[type=text] {
    box-shadow: inset 2px 2px 2px 2px black;
}

answered Feb 11 '13 at 13:54

Morpheus

8,829
13
51
77

score 2 · Answer 2 · answered Feb 11 '13 at 14:08

2

Agree with @Morpheus. Also you can use 2 shadows at the same time:

input[type=text] {
    box-shadow: inset 0 2px 2px 2px #000, inset 0 -2px 2px 2px #fff;
}

answered Feb 11 '13 at 14:08

AnilkaBobo

260
1
9

CSS: How to shadow a field like this?

2 Answers2