Theming a Drupal 6.x image upload button

Question

I am theming a Drupal website, so far so good. I am using Profile pictures 6.x-1.4 on a Drupal 6.24 platform.

I have got to the point of an image upload field, which by default looks like this: Original upload helper

The design demands it to look like this:

What it needs to look like

So far I have set the inputs css to this:

 #user-register #edit-profile-picture-upload {
    display: block;
    background: transparent url(../images/button-upload.png) no-repeat scroll center center;
    width: 130px;
    height: 158px;
 }

And this is the html for the filefield:

<div class="form-item" id="edit-profile-picture-upload-wrapper">
  <label for="edit-profile-picture-upload">Upload: </label>
  <input type="file" name="files[profile_picture_upload]"  class="form-file" id="edit-profile-picture-upload" size="40" />
</div>

But it only looks like this (on chrome & safari, much much worse on Firefox):

What its coming out like

How would you theme this correctly? Or at least where is the "Choose file/ No file chosen" button coming from?

soju soju · Accepted Answer · 2012-02-28T10:53:35

Styling an input type="file" is not easy since this type of input is totally browser dependant...

But you will find a lot of answers here : https://stackoverflow.com/search?q=style+input+file

You can, for example :

hide the file input,
replace it with a div (or else)
trigger click on file input when clicking on the div

PS: this is not a drupal issue

Theming a Drupal 6.x image upload button

1 Answers