::-webkit-file-upload-button

The ::-webkit-file-upload-button CSS pseudo-element represents the button of an <input> of type="file".

This pseudo-element is non-standard and only supported in WebKit/Blink compatible browsers like Chrome, Opera and Safari (indicated by the -webkit prefix).

Syntax

selector::-webkit-file-upload-button

Examples

HTML

<form>
  <label for="fileUpload">Upload file</label><br>
  <input type="file" id="fileUpload">
</form>

CSS

input, label {
  display: block;
}

input[type=file]::-webkit-file-upload-button {
  border: 1px solid grey;
  background: #FFFAAA;
}

Below is the example for you to try. The screenshot to the left shows what the button will look like if you are without access to Chrome, Opera or Safari.

Screenshot	Live sample

Specifications

Not part of any standard.

Browser compatibility

See also

• WebKit CSS extensions
• File and Directory Entries API
• File and Directory Entries API support in Firefox
• <input type="file">