I've not been able to figure out how to isolate the "choose file" button that's set in file upload field for webform module. I can style the field, but I can't get the button. I've looked all of the place, but can't find anything on getting anything on that specific button. This is a D7 site using the 7.x-3.18 version of webform.

It would be great if I could add a class, but if I could just get ahold of it in some way that doesn't affect the entire field that would be ideal.

choose file button

Here is the output:

<input type="file" id="edit-submitted-resume-upload" name="files[submitted_resume]" size="22" class="form-file">

The ID handles the entire field and I've been able to do a little with that, but can't use it to control that button.

Any ideas?

Thanks in advance.

  • 1
    It is a HTML / CSS limitation problem, not originating in Drupal. See this list of answers. Unless, of course, you know what HTML / CSS / JS trick you want to use and just don't know how to use it in Drupal. In that case please edit your question. – Mołot Sep 24 '13 at 14:13
  • 1
    Can you explain why you are down voting the answers which are correct? – Steven Sep 24 '13 at 14:20
  • @Steven Some people consider answering an off-topic question as downvote-worthy (a view of encouraging undesired behaviour or something I guess, not my line of thinking so I can't be sure). I've seen it all over the network, it's not a new thing. Just bear in mind you can't know whose votes they are, except to say that they're not the OP's - he doesn't have enough rep. In my experience if someone wants to leave an explanation they will, trying to get 'em to explain after the event doesn't usually happen. Smile and move on :) – Clive Sep 24 '13 at 14:39
  • Yeah, I noticed that we both got down-voted immediately after Molot's comment and was a little surprised. I later got an up-vote to offset it. Good to know about this practice though, as it may (or may not, I'm not sure) affect my behavior. I'll look around on meta, though I really assumed that if the question is still OPEN, that's all that matters. You don't want a user to read the answer below and think it's down-voted based on the content's accuracy though, because that would be deceptive. :-) – Boriana Ditcheva Sep 24 '13 at 17:17
  • As far as I remember question was already downvoted when I commented on it... But can't really tell now. For the answers, none contains real solutions, only links to them, so it might be cause of downvotes. I was tempted to flag them as link-only, to be honest, but instead I voted this question off-topic (as you could guess by my comment). – Mołot Sep 25 '13 at 5:00

Yes, actually styling a FILE INPUT field is hard because, just like you're seeing, it's a singular field that is hard to pick apart.

Here is a discussion of styling file input fields from stackoverflow.

As you can see - thought there are many solutions presented, they all require some jquery and essentially hide the input field and replace it with something else.

So in short - there is no easy way to do it.

| improve this answer | |

There is no way to style the file upload button using CSS that is 100% cross platform. The only way is to replace the file upload button with another button and use javascript.

Something like http://blueimp.github.io/jQuery-File-Upload/ for an example.

| improve this answer | |
(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function(context, settings) {
      var fakeFileUpload = document.createElement('div');
      fakeFileUpload.className = 'fakefile';
      var image = document.createElement('img');
      var x = document.getElementsByTagName('input');
      for (var i=0;i&lt;x.length;i++) {
        if (x[i].type != 'file') continue;
        if (x[i].parentNode.className != 'image-widget-data') continue;
        x[i].className = 'file hidden';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].relatedElement = clone.getElementsByTagName('input')[0];
        x[i].onchange = x[i].onmouseout = function () {
          this.relatedElement.value = this.value;

#mycontenttype-node-form div.image-widget-data {
    position: relative;

#mycontenttype-node-form div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;

#mycontenttype-node-form input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.