添加边框到背景

Question

我有以下标记和样式：

<input class="my-input" type="text />

.my-input {
    background: url(my-icon.png) no-repeat right center;
}

我实际创建了一个带右侧图标的输入 现在我想为该图标添加左边框。我试图在不增加新元素的情况下这样做 由于：after和：之前没有使用输入，我无法设法做到这一点。

我不想使用JavaScript而且我不想添加元素。

有可能吗？

Answer 1

您可以使用多种背景功能。要渲染垂直线，您可以使用linear-gradient技巧。以下是代码详细信息：

.my-input {
  background: linear-gradient(to right, green 2px, transparent 2px),
              url(http://placehold.it/30x30);
  background-repeat:no-repeat;
  background-position:right center;
  background-size:30px 30px;
  padding-right:30px;
}

Demo.

Answer 2

.my-input {
    background: url(my-icon.png) no-repeat right center;
    border-left: 3px solid yellow;
}