Custom Browse AND Submit buttons

I have modified the default settings for the submit button to use a custom image, but the submit button appears on a form where I also have file upload (with a browse button). I would like to use a custom image for the browse button as well and I suspect that I can set this through the style sheets, but cannot figure out how.

I'm testing this a simplified variation of this technique with the file upload input from gravity forms. Its working.

I'm not bothering with the lazy-loading the css. Just having the image I want in place is fine.

Here is my sass:

[css]
.ginput_full
  position: relative
  display: inline-block
  overflow: hidden
  width: 356px  // set to whatever the width of the form is
  opacity: 0

.gform_fields li#field_1_12.gfield label.gfield_label
  background-color: #DDD //setting background colour for testing
  position: absolute
  width: 356px // set to width of form
  height: 50px
  background-image: url("/img/upload.png")  // image to replace the input

Hi Chris.
Sorry for the delay in my reply.

I'm afraid I don't have this code on a live server. If displaying this would be valuable, I could set something up later today.

(Thing is, I only have a single site license for gravity forms. The site for which I have purchased a license for is not live yet.
If I showcase the technique using a GF instance on a demo site, how would this effect licensing?)

There is a problem in my current implimentation of this technique:

Using just styling rules that I have above, I replace the input with my own image. The image is a blank input form, styled the way I want it to look:
http://imgur.com/3aZNN

The problem is, that once the file for upload is selected, the user sees no text. In an unstyled version, the user would see text, showing the path of the file. So, my implimentation violates the users expectations.

I'll be experimenting further over the next few hours. I'll keep you posted on my progress.

Ok, I got something to work. Here are the notes that I created as I went. They might be a little messy.
I'm basing my technique on Pete Boere's method, at http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript

Notes follow:
Step one:
* Wrap target input in an element that we can give these styles to:
display: inline-block
overflow: hidden

Peter uses 'label'. Can we do that?
Maybe....

We get our input wrapped inside an oddball <span>, which is nested
inside a div. This span seems weirdly resistant to styling.

Let's try and treat the div that way that he treats the label

The innermost wrapping element, .ginput_full seems to be utterly
resistant to resizing.
So, I'm targeting '#field_1_12", which is the list item.
Ok... we can do that. Kewl. So far, so good.

Next, we hide the actual input.
Yup, we can do that. That was easy. But now we want to add our visual
"browse" button.

In order to do this, I target this element.
#field_1_12 .gfield_label
I give it these rules:

#field_1_12 .gfield_label
  position: absolute
  background-color: #7a7a7a
  right: -290px
  top: 2px
  width: 70px
  height: 30px
  -webkit-border-radius: 8px
  -moz-border-radius: 8px
  border-radius: 8px
  background-image: url("/img/browse.png")

Ok, the user can still click on it, and get the file selection
dialogue. Cool.

So, now we need to give the user feedback. User wants to have their
expectation of feedback met - we have to let them know that we know
which file they have selected.

At this point, we need to throw away our sense of integrity when it
comes to such aloof concerns as "seperation of content". *sigh

We use jquery to keep a div within the form to display the name of the
file. I inject with js:

// insert a div and exploit it's presence
	var displayDiv = "<div id=\"file-display\"><p></p></div> " ;
	$("#field_1_12").append(displayDiv) ;

Now we need to make sure that the display div show shows the selected file.

var target = $("#field_1_12 input") ;

	target.change(function(){
	   var fileDisplay =  $("#file-display p") ;
	    fileDisplay.empty() ;
	    fileDisplay.append( $("#field_1_12 input").val()) ;
	}) ;

And, we are done.
This works for me.

I have, however, not thoroughly tested it yet across browsers. I
expect that the behaviours will work just fine.

No problem Chris.

Reading my notes now, I can see they are indeed pretty messy. So, just to clarify a couple of things for people who want to style their upload inputs:

* I use Peter's basic tecnique for hiding the input, replacing it, and emulating it's behaviour.

* However, my the end goal for me was not to re-create the end result that he produces in his demo, but to give the appearance of what you would expect if you actually could style an upload input.

My end result looks like this:
http://imgur.com/ajkQ0