How to move img src a few pixels down in html page


Tags: html,css

Problem :

I found a way to make my own custom file upload control , by placing a fake control over it, and when i click the fake one , i am actually cliking the real control below.

Anyways the image for the browse button is a little to the top.

How can i lower it down a little?

Here is the js fiddle.

JsFiddle

Here is the html and css:

    <div>
    <div class="fileinputs">
        <input type="file" class="file" />
        <div class="fakefile">
            <input />
            <img src="search.jpg" />
        </div>
    </div>
</div>

div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}


Solution :

I believe this is what you are looking for. jsFiddle

CSS

.moveimage
{
    position: relative;
    top: 3px;
}

Modified HTML

<img class="moveimage" src="search.jpg" />

    CSS Howto..

    How to load self hosted font files if the GoogleFont service is unavailable?

    how to make this “div” always visible to users

    CSS sprite - showing part of another image when zooming

    How to center vertically child elements inside div [duplicate]

    HTML/CSS - how to position an image in the above the right and left corner of a panel

    how to add mutiple values to jquery code

    How would I call :parent for this tooltip?

    how to create a css translateY on hover effect

    How to insert a line break before an element using CSS

    how to count how many elements have a certain class

    How can I make a two column layout's main div auto fit to browser width?

    How to animate the filling of a html element

    How to create smaller CSS files for easier handling while developing [closed]

    How to integrate CSS