我尝试将图标放入文本输入字段。 例：
一种解决方案是使用背景图像然后使用padding-left。
但我想用css sprites。我尝试了下一个代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.input {
padding-left:35px;
width: 128px;
background: Red;
}
.sprite:before{
background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png');
content: " ";
position: absolute;
height:32px;
width:32px;
margin: -10px 0 0 -10px;
z-index:100;
}
.sprite:before {
background-position: -32px 0;
}
</style>
</head>
<body>
<input type="text" class="input sprite"></input>
</body>
</html>
我究竟做错了什么？
对不起，我不知道为什么你的解决方案不起作用..我自己试了一下，但是-Tag里面有一个-Tag。
那么，这样的事情（快速和肮脏！）？
或者你的意思是：“一种解决方案是使用背景图像，然后使用填充左边。” ？
<!DOCTYPE html>
<html>
<head>
<style>
input
{
width: 250px;
height: 65px;
padding-left: 85px;
}
img.home
{
width:85px;
height:65px;
background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png') 0 0;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<input type="text" class="input"/><img class="home">
</body>
</html>
我不确定会产生什么样的效果，但是我想因为你看不到图像，你会自己回答这个问题，所以，要指出示例标记中的错误是什么，这是使用:before在输入元素中的含义。正如你在this answer中看到的那样，像::before和::after这样的伪元素只能应用于容器。
只需将标记更改为
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.input {
padding-left: 35px;
width: 128px;
background: Red;
}
.sprite:before {
background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png');
content: "";
position: absolute;
height: 32px;
width: 32px;
margin: -10px 0 0 -10px;
z-index: 100;
}
.sprite:before {
background-position: -32px 0;
}
</style>
</head>
<body>
<div class="sprite">
<input type="text"class="input"></input>
</div>
</body>
</html>
对于你的想法可能是一个很好的起点。