Styling input text CSS

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')开发者_JS百科;
    background-repeat: repeat-x;

}
   <input id="txtScrictAddress" value="Your Adress (required)" type="text" />

Input-BG.png is this image :

and here is the result.

1. Did I slice input image right ?
2. Input has a left border color , How should style the input in css like the image?

---

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/

---

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).

---

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.