Styling Safari input file with CSS?

Question

How to create a file type input style for Safari, Chrome and other WebKit browsers?

Right now, all I get is the Choose File button, which appears on top of a regular text input window.

I looked around Google a bit, but I really didn't see anything.

Answer 1

All rendering mechanisms automatically generate a button when it is created. Historically, this button has been completely incompatible. Recently, however, Trident and WebKit have added hooks through pseudo-elements.

Trident

As in IE10, the file entry button can be written using the pseudo-element ::-ms-browse . Basically, any CSS rules that you apply to a regular button can apply to a pseudo-element. For instance:

 <input type="file"> ::-ms-browse { background: black; color: red; padding: 1em; } 

In IE10 on Windows 8, the following is displayed:

Webkit

WebKit provides a hook for the file entry button with the pseudo-element ::-webkit-file-upload-button . Again, almost any CSS rule can be applied, so the Trident example will also work here:

 <input type="file"> ::-webkit-file-upload-button { background: black; color: red; padding: 1em; } 

On Chrome 26 on OS X, the following is displayed:

Answer 2

A few days ago I had the task of styling input="file" with CSS (mostly CSS3 with additional effects), and this can be done.

I wrote (or did a little rewrite for the file plugin) jQuery plugin. Its main behavior is the same with images, but I completely replaced the images with span and div s. The plugin hides input="file" , then creates a shell using CSS and, finally, launches click actions on hidden input.

I hope this will be useful to everyone.

Here is an example of input="file" style with CSS only.

Answer 3

I do not believe that you can. Apple just recently decided to include styling for its form controls. They find it harder to find buttons and inputs when they don't look like buttons, input - so they may not allow you to embed your inputs to upload files.

I am about 90% sure that you can not do this.

Answer 4

Having a flash loader can give you more pain:

It works only in IE in the same session as your browser, and in all other browsers it starts a new session, so you will exit the protected application.

The only solution for this is to send your session data to Flash as well ... there you go!

I landed on this page, looking for either a way to style the file entry element for Safari ... I have a lot of them in the table cell only 150 pixels wide, but these inputs make it bigger.

I have found only one solution so far, and this should allow them to float over the rest using style="position:absolute;z-index:2" , while my TD has the style position:relative .

This is a bad decision, I know!

Answer 5

Firefox 4 allows you to insert input elements (in round form): link

We hope that other browsers will understand what a huge sore point this removes.

Answer 6

If you are only interested in webkit browsers, you can use their built-in pseudo-selectors to target different parts of the file input element. input::-webkit-file-upload-button {...} , for example.