How to change <input type=“file”> design so

Question

Possible Duplicate:
input type=file show only button

The has this kind of design:

Can I modify it so it won't show the text field?

Answer 1

a very good guide is found in quirksmode - Styling an input type="file"

quote with some modifications to match question:

1. Take a normal <input type="file"> and put it in an element with position: relative. or absolute

2. To this same parent element, add an image or a button, which have the correct styles. Position this element absolutely, so that they occupy the same place as the <input type="file">.

3. Set the z-index of the <input type="file"> to 2 so that it lies on top of the styled image or button.

4. Finally, set the opacity of the <input type="file"> to 0. The <input type="file"> now becomes effectively invisible, and the styled image or button shines through, but you can still click on the "Browse" button. (Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the <input type="file"> to remain clickable)

Answer 2

Don't see a jQuery tag in your question but hey, it's helpful, and possibly quite easy to rewrite in vanilla JS. This is a little jQuery plugin I extracted from Ideal Forms, a plugin I maintain at github. It covers all the basics to do what you want, with fallback for IE and multiple for HTML5 browsers. Plus handling events and markup replacement. CSS is on your own, but nothing too complicated to style as you can see. You can hide the text field too if you want. The idea here is that this allows for ANY customization possible with CSS.

$.fn.toCustomFile = function () {
  return this.each(function () {

    var

    $file = $(this), // The file input

    // Necessary markup
    $wrap = $('<div class="wrap">'),
    $input = $('<input type="text" class="filename" />'),
    $button = $('<button type="button" class="upload">Open</button>')

    // Hide by shifting to the left, that way can 
    // still use events that are otherwise problematic
    // if the field is hidden as in "display: none"
    $file.css({
      position: 'absolute',
      left: '-9999px'
    })

    // Events
    $button
      .attr('tabIndex', -1) // disable focus on button for better usability
      .click(function () {
        $file.trigger('click') // Yes, `click`, not `change`. Crossbrowser compat.
      })

    $file
      .attr('tabIndex', -1)
      .on({
        change: function () {
          // Detect if browser supports HTML5 "file multiple"
          var multipleSupport = typeof $('input')[0].multiple !== 'undefined',
              files = [],
              fileArr,
              filename
          if (multipleSupport) {
            fileArr = $file[0].files
            for (var i = 0, len = fileArr.length; i < len; i++)
              files.push(fileArr[i].name)
            filename = files.join(', ')
          } else {
            filename = $file.val().split('\\').pop() // Remove fakepath
          }
          $input.val(filename)
          // Set filename as title tooltip on 
          // input field for better usability
          $input.attr('title', filename)
        },
        focus: function () {
          $input.trigger('focus')
        }
    })

    $input
      .on({
        keyup: function () { $file.trigger('change') },
        focus: function () { $file.trigger('change') },
        blur: function () { $file.trigger('blur') },
        // Open files when pressing [ENTER]
        // on the input field
        keydown: function (e) { if (e.which === 13) $file.trigger('click') }
      })

    // Append to DOM
    $wrap.append($button, $input).insertAfter($file)

  })
}

Here's a gist for ease of use: https://gist.github.com/3051209

Answer 3

Suggestion: You can use the uploadify plugin.