在表单输入元素中将css sprite的有限部分显示为背景

Question

我有一个表单输入字段（搜索栏），我使用精灵图标作为输入字段的背景。

有没有办法将图像精灵设置为输入字段背景，但是限制背景/精灵的可视空间以避免精灵流血？理想情况下，无需编辑精灵图像本身。

以下是所需的结果：http://i.imgur.com/y1xu6RS.png

目前我得到的结果是：http://i.imgur.com/UruNhfj.png

输入字段具有所需的填充和图像精灵。但是，由于精灵中的图像与输入字段大小的接近，我得到精灵出血。有没有办法单独使用CSS解决这个问题？

我的输入字段css大致是：

#search-field{
            padding-left: 50px; /*numerical values aren't exact*/
            background: url("images/icon_sprite.png") 5px -15px;
            background-repeat: no-repeat;
            background-color: #fff;
}