Styling Input Type=File Tags

[gheidorn]

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!

[jamygolden]

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.

[azharrrkhann]

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

[Paulie_D]

What effect are you trying to achive?

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

[Senff]

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.

[carthyca]

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

[JTParrett]

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

[JTParrett]

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

Style me!

[JTParrett]

http://codepen.io/JTParrett/pen/kjawm

[Author]

Posts