css - 样式输入文本 CSS

Question

我正在尝试创建如下图所示的输入文本:

首先，我在 this 之类的帮助下使用了 CSS3。 fiddle 。由于旧浏览器的问题，我决定不使用 CSS3。现在我这样编码:

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 是这张图片:

和here是结果。

1. 我是否正确切片了输入图像？
2. 输入有一个左边框颜色，应该如何像图像一样在 css 中设置输入的样式？

Answer 1

您只需要将边框半径和边框设置为无即可。并编辑您的图像，使黑色的东西也位于左侧。

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/