Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Summary
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
Example
HTML Content
<form>
<label for="fileUpload">Upload file</label><br>
<input type="file" id="fileUpload">
</form>
CSS Content
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 specification. This is a proprietary pseudo-element specific to WebKit/Blink.
Browser compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | No support | (Yes) | No support | (Yes) | (Yes) |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | No support | (Yes) | No support | (Yes) | (Yes) |