Grow your CSS skills. Land your dream job.

Styling Input Type=File Tags

  • # March 18, 2011 at 10:19 am

    I’ve googled and seen the quirksmode attempt at styling file input tags, but I’m not a fan.

    Does anyone have a quick and easy way to do this? Was this addressed in HTML5?

    Thanks in advance!

    # March 18, 2011 at 1:13 pm

    I’ve just styled one, and It wasn’t fun at all. The most simple way I found was:


    I saved out a picture of the browse button, set it as the div.browse background and set it’s width and height accordingly.

    I then set input-file to “opacity: 0;”. When you click on the browse button, it’s as if you’re clicking on input-file.
    I then created some jQuery:

    $('input[type="file"]').change(function(){
    $(this).parent().siblings('input').val($(this).val());
    });

    When you select a file, it changes the text within the input-text.

    I understand, this is a very lame way of doing it, but it was the easiest and cross-browser-consistent way I could find/think of.

    # October 3, 2012 at 9:51 am

    hi jamy_za ,
    i m not able to decorate input type file kindly give me details plz!

    # October 3, 2012 at 9:59 am

    What effect are you trying to achive?

    Do you have an image of what it is supposed to look like?

    # October 3, 2012 at 11:32 am

    File input tags are impossible to style by themselves, and you’ll need some trickery (like @jamy_za’s example).

    What I usually do myself, is to overlay a fake button OVER the input field, and style the fake button.
    With jQuery, clicking on the fake button triggers a click on the input field.

    http://codepen.io/senff/pen/GocHC

    There’s some more styling needed for AFTER you’ve selected a file, but this just shows the first step.

    # July 3, 2013 at 7:28 am

    Please try this

    jQuery

    $(function() {
    $(“.uploadButton”).mousemove(function(e) {
    var offL, offR, inpStart
    offL = $(this).offset().left;
    offT = $(this).offset().top;
    aaa= $(this).find(“input”).width();
    $(this).find(“input”).css({
    left:e.pageX-aaa-30,
    top:e.pageY-offT-10
    })
    });
    });

    css
    **********

    .uploadButton input[type="file"] {
    cursor ointer;
    position:absolute;
    top:0px;
    opacity:0;
    }

    .uploadButton {
    position:relative;
    overflow:hidden;
    height:128px;
    cursor ointer;
    width:128px;
    background:url(http://cdn4.iconfinder.com/data/icons/dellios_system_icons/png_128/arrow-up.png);

    opacity:0.5;
    }
    .uploadButton:hover {
    opacity:1;
    }

    html

    # July 3, 2013 at 7:33 am

    You can assign the input a label () and then style the label and hide the input using display: none;

    # July 3, 2013 at 7:34 am

    Sorry, my label example was supposed to be in the brackets. :P

    # July 3, 2013 at 9:04 pm

    Zero opacity: http://jsfiddle.net/tovic/YcC85/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".