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

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?

    How to set a div within text?

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    How to override the computed style in css?

    How to implement fluid design to fit 1024x768 size monitor or higher?

    Way of Determining How Many Style Rules I have

    How can I make the menu to wrap when I resize my browser?

    Showing a demo of my CSS on any website

    How to Decrease Image Brightness in CSS

    How to create this type of element using XHTML & CSS?

    How to control the CSS on an Active/Focused button in Foundation 5 [RESOLVED]

    How to make float : left work same as table-cell?

    How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

    How does Mashable.com displays/hides an element through Css?

    How to read all numeric values from within a file in php?

    How to make rails load multiple css files

    How to edit .css file from html via jquery

    How to horizontally center a Views field in a grid using CSS field style

    how to show JS alert on open of each tab of the slider?

    How to make a background color white on drop down

    How does height of a div relate to font size

    How do I vertically center align a position:relative element

    How to make like this gradient sun effect using CSS?

    How do I make my links be next to each other in CSS/HTML?

    How can i refer to all of my tags in CSS?

    Why was ::selection removed from the CSS Selectors spec, and how does its specificity work against type selectors?

    How to style my unordered list like a table?

    How to show the first N elements of a block and hide the others in css?

    How to reset the style properties to their CSS defaults in javascript?

    How to apply Hovering on html area tag?