Styling input text CSS - css

Question

I am trying to create input text like below Image :
First I used CSS3 with some help like this fiddle . because of problems with old browsers I reached to don't use CSS3.
Now I coded like this :
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('Pictures/Input-BG.png');
background-repeat: repeat-x;
}
<input id="txtScrictAddress" value="Your Adress (required)" type="text" />
Input-BG.png is this image :
and here is the result.
Did I slice input image right ?
Input has a left border color , How should style the input in css like the image?

Answer 1

You just need to set a border radius and border to none. And edit your image so the dark thing is on the left side also.
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('http://i.stack.imgur.com/pbpVI.png');
background-repeat: repeat-x;
border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/
border: 0;
}
http://jsfiddle.net/TGzng/8/

Answer 2

if you want to use images to get something where both ends differ, you will at least need 2 images to get that. try to search for "sliding doors input css". maybe this topic on SO helps you out (but there are a million other examples out in the web and on Stackoverflow).

Answer 3

You need to add a border-radius to round the edges. This won't work pre-IE8 though.
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('http://i.stack.imgur.com/pbpVI.png');
background-repeat: repeat-x;
border:1px solid #777;
border-radius:5px
}
As for image slicing, easy way to get the left shadow part means you need to have a very wide image for the background. Or do that sliding doors thing the other person suggested.