html - 如何从 DIV 背景中的 CSS Sprites 中选择所需的图像并对其进行定位？

Question

我有一个问题。在设计一些代码时，我卡在了一个位置。我想从 CSS Sprite 中选择一个搜索图标并将其保持在所需位置，如下面的屏幕截图所示。

有一些限制，比如我只能编辑或添加更多 CSS，我不能编辑搜索输入标签，也不能在输入标签周围添加更多元素，如 DIV、SPAN、P、B 等。为此，我写的代码在 www.jsfiddle.net/JFx9g 上可用。

这可能吗？你能编辑这个吗？

Answer 1

试试这个(我也更新了 fiddle )

<div class='search_input_container'>
    <input class="search_input" name="q" type="text" value=""/>
    <div class='search_glass'></div>
</div>

CSS

.search_input_container{
    width:450px;
    height:30px;
    border:1px solid #ccc;
    display:table;
}
.search_input{
    border:none;
    padding:5px;
    width:90%;
    outline:none;
    display:table-cell;
}
.search_glass{
    border:none;
    width:18px;
    height:20px;
    background: url(http://i.imgur.com/BX2OXxc.png);
    background-repeat: no-repeat;
    background-position: -20px 0px;
    display:table-cell;
}

新编辑的 JSFIDDLE: http://jsfiddle.net/JFx9g/10/