Question

我尝试将图标放入文本输入字段例如：{
{0}}

一种解决方案是使用 background-image ，然后使用 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>

我做错了什么？

Answer 1

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

那么，这样的事情（快速又脏兮兮！）？

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

enter image description here

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

Answer 2

我不确定会产生什么效果，但我想因为你看不到图像，你自己会很难回答这个问题，所以要指出什么是错误的示例标记，它是在输入元素中使用: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>

可能是你想到的一个很好的起点。

将图标放入文本输入字段

2 个答案: