Thursday, November 27, 2014

File input control don't have to be ugly    

The caption is a bit of a lie, it has to be ugly, since native browser implementation is pretty ugly and there is no straight forward way to change it's L&F.

So what do you do when your have a nice bootstrap  L&F in the whole system?

This fiddle suggesting a nice solution that was inspired by this guy.

I've used it together with AngularJS file uploader directive and it looks and works pretty nice good together.

In general the solution is :

  1. To make the sure you file input tag is transparent 
  2. To increase it's z-index so it will be above
  3. To locate it on the same spot a nice looking control is located
  4. To make sure z-index of nice looking control is lower than the file input tag

Actually that all the story, if anyone familiar with better techniques to prettify file input tag, please leave a comment bellow.