如何给背景图像边框？

Question

使用背景图像输入框和填充值将显示如下：

现在如何将border-right应用于背景图像？

或者，最好的做法是什么？

---

我喜欢这些输入

<form>
  <input type="text" />
  <input type="text" />
  <input type="submit" />
</form>

CSS

input{background: url('path') no-repeat left center; padding-left: 50px;}

Answer 1

我只想将border-right添加到背景图片中，如下所示：

<强> CSS

input[type=text]{
    background: url('http://uploadpie.com/LctRy') no-repeat left center; 
    padding: 18px 0 18px 70px;
    border: 1px solid #eaeaea;
    font-size: 17px;
    color: #999;
}

<强> Demo

Answer 2

好吧，我玩了一些盒子阴影，我想出了这个

<强> FIDDLE

input[type="text"] {
    padding: 15px;
    border: 1px solid #ccc;
    padding-left: 60px;
    background-image: url("http://i.imgur.com/m8lJN4g.png");
    background-repeat: no-repeat;
    background-position: 2px 3px;
    box-shadow: inset -175px 0px #fff, inset -176px 0px #ccc;
}

Answer 3

您只需为背景图片添加边框即可。如果您不是针对IE6的浏览器。如果您从IE6进行检查，则必须将文本框包含在span或div中，并将背景图像添加到div。希望这会有所帮助。