How To Pick Desired Image From CSS Sprites In A DIV Background And Position It?

Question

I have a problem. While designing some codes, I stuck at a position. I want to pick a search icon from a CSS sprites and to keep it to a desired position like shown in below screenshot.

There are some limitation like I can only edit or add more CSS and I can't edit search Input tag and also can't add more element around Input tag like DIV,SPAN,P,B etc. For this purpose, I wrote a code that is live at www.jsfiddle.net/JFx9g.

Is this possible or not? Can you edit this?

Answer 1

Since I think that it is not possible to do it as I asked so I tried myself to do this with as short code as I can and then I got the following one That is also live on www.jsfiddle.net/JFx9g/18/

<style type="text/css">
.search_text {
    position: relative;
}
.search_text:after {
    content: "";
    position: absolute;
    top: -3px;
    right: 7px;
    width: 19px;
    height: 19px;
    background: url(http://i.imgur.com/BX2OXxc.png) -19px -2px no-repeat;
}
.search_text_input {
    height: 24px;
    width: 450px;
}
</style>
<span class="search_text">
<input class="search_text_input" name="q" type="text" value=""/>
</span>

Answer 2

try this (i have also updated the fiddle)

<div class='search_input_container'>
    <input class="search_input" name="q" type="text" value=""/>
    <div class='search_glass'></div>
</div>

css

.search_input_container{
    width:450px;
    height:30px;
    border:1px solid #ccc;
    display:table;
}
.search_input{
    border:none;
    padding:5px;
    width:90%;
    outline:none;
    display:table-cell;
}
.search_glass{
    border:none;
    width:18px;
    height:20px;
    background: url(http://i.imgur.com/BX2OXxc.png);
    background-repeat: no-repeat;
    background-position: -20px 0px;
    display:table-cell;
}

New Edited JSFIDDLE: http://jsfiddle.net/JFx9g/10/

Answer 3

http://jsfiddle.net/vikramjakkampudi/W2Cnc/

input{
height:30px;
}

 .inputImage {
        background-position: 100% center;
        background-clip: border-box;
        background-attachment: scroll;
        background-origin: padding-box;
        background-image: url("your image url");
        background-repeat: no-repeat;
        background-size: 8px auto;
        cursor: pointer;
        width: 93.5% !important;
        padding-right: 5%;
    }

add this css and assign inputImage class to your input field