Modifying file type input with css and make it more attractive

[sarthak]

Guys i’m bit confused in editing <input type="file">.
There are lots of examples but what will a best method using only css ????

[Paulie_D]

Do you mean styling it?

You can select it with input[type="file"].

Grabbing the button though is much difficult if not impossible as browsers don’t want you to mess with it.

What specifically are you trying to do?

http://www.quirksmode.org/dom/inputfile.html

http://www.appelsiini.net/projects/filestyle

[sarthak]

actually i want to style it like that in
Pinterest
some what like that and if possible using Css only

[Paulie_D]

Which?

The sign-up buttons?

They are just buttons…not input file types

You can style a <button> any way you like.

But…as I said, you can’t select the input[type=file] button using CSS. You have to use fake elements orJS to modify the whole thing.

[sarthak]

oh So we can’t edit an input[type=file] button with only Css fine

[Ed]

It doesn’t look like you can modify the appearance of an element, unfortunately.

Other options include a jQuery plugin (Google for “jquery file upload plugin”), or even do it in vanilla JS (i.e. Dropzone) to offer an alternative solution. Dropzone is especially cool because it lets you do drag & drop uploading.

[sarthak]

Thanx Ed i think that jQuery plugins are better option .
And i think i should use this one http://www.dropzonejs.com/

[Author]

Posts