样式输入文本CSS

Question

我正在尝试创建如下图像的输入文本：

首先，我使用CSS3和this小提琴等帮助。因为旧浏览器的问题我达成了不使用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/

Answer 2

如果你想使用图像来获得两端不同的东西，你至少需要2张图像来获得它。尝试搜索"sliding doors input css"。也许this topic on SO可以帮助你（但是in the web和Stackoverflow上还有一百万个其他例子。）

Answer 3

您需要添加边框半径以使边缘变圆。这不会在IE8之前发挥作用。

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
}

对于图像切片，获取左阴影部分的简便方法意味着您需要具有非常宽的背景图像。或者做另一个人建议的推拉门。