Trouble styling <input type="file" />

Hello everyone, I was wondering if someone could help me figure out the best way to stylize a form element where type="file". I currently have all my text inputs, submit buttons, textareas, etc. styled just the way I want them to be, but I can't figure out how to stylize a file input. I have been googling my brains out looking for css, javascript, jquery tricks and more to try to solve it, but I can't figure anything out.

I just want to have the textbox for the file-upload to be the same as my other text boxes and the button to be the same as a submit button. Is there any way to do this?


Thanks.

 

Hi Thorlax,

it isn't actually possible to style an input type=file! This is definitely something that needs to be addressed, form elements are horrible to style! I have however used a few javascript form replacements like jqtransform or another jquery alternative - unfortunately i am not sure if they replace the "file" input.

 

You could use something like jQuery Uploadify. Ok, there is no text box then, but it looks much better

 

I have looked into Uploadify, and unfortunately replacements like that may be my only option. I was just hoping that there was something I was missing that would be easier like a way to open the file selector with javascript or something.

Thanks for the responses guys.

 

You must have used bad keywords because there are heaps of tutorials for styling file inputs.

If you want to change the background color, do this:

input {
   background-color: black;
   color: white;
}

Code (markup):

 

Unfortunately tutorials such as that don't allow for more advanced styling such as changing background images and customized button images. It is possible, but immensely more difficult than it should be. Even in the tutorial you linked to, it requires a somewhat beefy javascript function to get the desired output (and it still seems to have some variation betweeen browsers).