如何在<input type =“text”/>中显示多个图像

Question

我使用

<input type="text">

background: #e3e3e6 url(search.jpg) no-repeat 7px 2px;

在左侧。

我想在文本框的另一侧添加其他图像。 （右边）。 最好的方法是什么？

Answer 1

您可以使用multiple background images on the element，就像这样：

html（使用class属性分隔有和没有背景的元素）

<input type="text" />

示例CSS：

input[type="text"] {
    background: url(http://www.placehold.it/20x20&text=left), url(http://www.placehold.it/20x20&text=right);
    background-repeat: no-repeat, no-repeat;
    background-position: center left, center right;
}

以下是演示：http://jsfiddle.net/oLd7zdf7/