Give some depth to my input - css

Question

I´m trying to do a basic effect in css to give some depth to my input, something like the image below. I´m trying to do with my code below but anything is missing here because my result is not icual to my image example.
My html:
<form>
<input type="text" placeholder="Search..." />
</form>
My css:
input[type="text"] {background-color:#232323; color:#fff; border:1px solid #151515; -webkit-border-radius: 15px;}
What I´m trying:

Answer 1

You will need at last 2 elements here: one for the dark-grey background, the other for the input.
The rest of my answer has been tested and works in IE10 +, FF & Chrome. If you're looking for IE support for 9 and below this wont work out of the box. It also relies on setting some fixed widths.
You'll recall I mentioned two elements, well you should be using a label tag anyway.
Adjust your HTML to te following:
<label>Search
<input type="text" placeholder="Search" />
</label>
The follwoing CSS positions the input to hide label text.
label {
display:inline-block;
border:1px;
padding:10px;
background-color:#111;
position:relative;
color:#FFF;
width:200px;
height:20px;
}
label input {
-moz-box-shadow: inset -1px -1px 2px #CCC;
-webkit-box-shadow: inset -1px -1px 2px #CCC;
box-shadow: inset -1px -1px 2px #CCC;
border-radius:5px;
background-color:#000;
color:#FFF;
border:none;
padding:3px;
position:absolute;
left:5px;
padding:5px;
width:200px;
height:16px;
top:7px; /* This is ((label hight + (padding * 2)) - this height)/2;*/
/* e.g. ((20 + (2 * 10)) - 16)/2 */
}
Demo

Answer 2

Not sure exactly what you mean, but is this getting close to what you want?
input[type="text"] {
background-color:#232323;
color:#fff;
padding:2px 5px;
border:5px solid #151515;
-webkit-border-radius: 15px;
}