Css 将图标放入文本输入字段_Css_Input_Icons_Css Sprites

Css 将图标放入文本输入字段

css input

Css 将图标放入文本输入字段,css,input,icons,css-sprites,Css,Input,Icons,Css Sprites,我尝试将图标放入文本输入字段。示例：一种解决方案是使用背景图像，然后使用左填充但是我想使用css精灵。我尝试了下一个代码： <!DOCTYPE html> <html> <head> <style type="text/css"> .input { padding-left:35px; width: 128px; background: Red; }

我尝试将图标放入文本输入字段。
示例：

一种解决方案是使用背景图像，然后使用左填充

但是我想使用css精灵。我尝试了下一个代码：

<!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>


.输入{
左侧填充：35px；
宽度：128px；
背景：红色；
}
雪碧：以前{
背景：url（'http://img45.imageshack.us/img45/4259/buildingssheet7dv.png');
内容：“；
位置：绝对位置；
高度：32px；
宽度：32px；
裕度：-10px0-10px；
z指数：100；
}
雪碧：以前{
背景位置：-32px0；
}

我做错了什么？

对不起，我不知道你的解决方案为什么不起作用。我自己尝试过，但在-Tag中有一个-Tag

那么，像这样的东西（又快又脏！）怎么样

或者你的意思是：“一种解决方案是使用背景图像，然后使用左边填充。”


输入
{
宽度：250px；
高度：65px；
左侧填充：85px；
}
伊姆格之家酒店
{
宽度：85px；
高度：65px；
背景：url（'http://img45.imageshack.us/img45/4259/buildingssheet7dv.png') 0 0;
位置：绝对位置；
左：10px；
顶部：10px；
}

我不确定想要的效果是什么，但我想既然你看不到图像，你自己也很难回答这个问题，所以，要指出示例标记中的错误之处，是在输入元素中使用了

：before

。如中所示，像

：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>


.输入{
左侧填充：35px；
宽度：128px；
背景：红色；
}
雪碧：以前{
背景：url（'http://img45.imageshack.us/img45/4259/buildingssheet7dv.png');
内容：“；
位置：绝对位置；
高度：32px；
宽度：32px；
裕度：-10px0-10px；
z指数：100；
}
雪碧：以前{
背景位置：-32px0；
}

这可能是一个很好的出发点

<!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>