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


Tags: html,css,image,background,sprite

Problem :

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?



Solution :

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>

    CSS Howto..

    How to center this element in css

    How to create mirrored image effect with CSS single element

    how to make the background the same as the div size in css

    How to make half-square background in css

    How to create a underline with small break in middle with css?

    How to change the Menu colour when selected?

    How to target a CSS ID to a specific HTML tag [closed]

    How to get the min-height of the object when its parent is set to display none?

    How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

    How to adjust the length of input

    how to draw the # of likes bubble like what is on the right side of the facebook like button

    How to stop one layer going over another

    How to use a divider in a navigation with list elements?

    How to disable CSS Class on particular DIV

    CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]

    How to control dojo widget classes, or how to get fine-grained control of style

    Fill dynamic
    's with content. But how to show it?

    How to Vertically Center 2 anchor tags with CSS?

    How to create a fixed menu (links come from right to left) - HTML & CSS

    custom styles not effecting the nested accordion jquery - How to fix

    How to apply css style to custom attributes

    How to style an embedded jsp inside another jsp?

    CSS: How can i divide a border into two lines? [duplicate]

    How to do caption hover effect on a background?

    how to get value of colors from CSS

    How to achieve MS word tab function in html/ css?

    How to make the page load scrolled down to
    when loaded?

    How come the first

    Trying to incorperate a really simple light box. How do I stay centered on scroll?

    Dompdf: how to get background image to show on first page only