Put icon into a text input field

Question

I try to put icon into a text input field.
Example:
example

One solution is using background-image and then use padding-left.

But I want to use css sprites. I tried next code:

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

What am I doing wrong?

score 0 · Answer 1 · answered Nov 14 '13 at 13:47

Sorry I don't know why your solution doesn't work..I tried it by myself, but with a -Tag inside the -Tag.

So, what about something like this (quick and dirty!)?

Or did you mean this by: "One solution is using background-image and then use padding-left." ?

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>

score 0 · Answer 2 · edited May 23 '17 at 12:27

I'm not sure what would be the desired effect, but I guess since you couldn't see the image, you would have trouble answering that yourself, so, to point out what is hands down wrong in the example markup, it's the use of :before in an input element. As you can see in this answer, pseudo-elements like ::before and ::after can only be applied to containers.

Simply changing your markup to

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

might be a good starting point for what you have in mind.

Put icon into a text input field

2 Answers2