The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:


    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.

    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


    $(function() {
    $(“.uploadButton”).mousemove(function(e) {
    var offL, offR, inpStart
    offL = $(this).offset().left;
    offT = $(this).offset().top;
    aaa= $(this).find(“input”).width();


    .uploadButton input[type=”file”] {
    cursor ointer;

    .uploadButton {
    cursor ointer;

    .uploadButton:hover {


    # 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

    This reply has been reported for inappropriate content.

    Zero opacity:

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed