browse button is not aligned and change it to red colour

Question

For uploading an image, the browse button is not properly aligned and also how can i change the colour of the browse button to red? I have used file field.

Answer 1

You can't style file fields with CSS. But with a little help of javascript you may.

The idea is simple:

Create an input:

<input type="file" ... class="fade_input"/>

#Now place in image
<img src=... class="your_button_red_or_other_color"/>

Now give both position absolute (in my case I had them in a block with pos relative) Drag input over button and give it bigger z-index then button so button would be under input. Now fade the input with opacity: 0 (not working in IE so use javascript to fade)

Gues the idea is understood.