html - 如何在 <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/