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.

1. Did I slice input image right ?
2. 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('https://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/