0

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

一种解决方案是使用background-image然后使用padding-left。

但我想使用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>

我究竟做错了什么？

4

2 回答 2

0

抱歉，我不知道为什么您的解决方案不起作用..我自己尝试过，但是 -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>
于 2013-11-14T13:47:49.410 回答
0

我不确定想要的效果是什么，但我想既然你看不到图像，你自己就很难回答这个问题，所以，要指出示例标记中的错误之处，就是使用在: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>

对于您的想法，可能是一个很好的起点。

于 2014-11-27T13:40:09.203 回答