Forums

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!

jamy_za

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

<input class="text" type="text" />
<div class="browse"><input name="statement" type="file" /></div>

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.

treehouse : what would you like to learn today?

Forums

Styling Input Type=File Tags