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

Question

我正在<input type="text">使用

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

在左侧.

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

Answer 1

您可以在元素上使用多个背景图像,如下所示:

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/