添加邊框背景

Question

我有以下的標記和樣式：

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

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

其實我建立了一個輸入與右側的圖標。
現在我想爲該圖標添加左邊框。我試圖在不添加新元素的情況下做到這一點。
因爲：之後和：之前沒有使用輸入，我無法做到這一點。

我不想使用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; 
}