CSS Styling of File Upload Button with ::file-selector-button Selector

css
Published on January 24, 2021

The upload button in <input type="file" /> is represented by ::file-selector-button CSS pseudo-element. This can be used to style the file input type.

Chrome, Edge & Safari support the non-standard ::-webkit-file-upload-button which serves the same purpose.

input[type="file"]::file-selector-button {
	/* custom CSS */ 
}

/* Chrome, Edge & Safari */
input[type="file"]::-webkit-file-upload-button {
	/* custom CSS */ 
}

Example

HTML & CSS :

<input type="file" id="demo-file" />

#demo-file::file-selector-button {
	border: 2px solid #555555;
	color: #555555;
	padding: 8px;
	border-radius: 4px;
	background-color: #ffffff;
}

#demo-file::file-selector-button:hover {
	background-color: #e9e9e9;
}

#demo-file::-webkit-file-upload-button {
	border: 2px solid #555555;
	color: #555555;
	padding: 8px;
	border-radius: 4px;
	background-color: #ffffff;
}

#demo-file::-webkit-file-upload-button:hover {
	background-color: #e9e9e9;
}

Browser Compatibility

::file-selector-button is supported in Firefox. Chrome, Edge & Safari support the non-standard ::-webkit-file-upload-button.

In this Tutorial