Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Styling of File Upload Button with ::file-selector-button Selector
We can style the file upload button using the CSS pseudo-element ::file-selector-button. However, the full support of this pseudo-element is limited to Firefox and Firefox Android. The ::-webkit-file-upload-button is used to support Safari, Chrome and Opera.
Syntax
selector::file-selector-button {
property: value;
}
selector::-webkit-file-upload-button {
property: value;
}
Style File Upload Button With ::file-selector-button
The following example illustrates CSS ::file-selector-button selector. On hover, we have styled it with a grab cursor, purple background, and inset shadow −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="file"] {
margin: 20px 0;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
}
input[type="file"]::file-selector-button {
padding: 10px 20px;
border: none;
background-color: #f0f0f0;
color: #333;
border-radius: 3px;
cursor: pointer;
margin-right: 10px;
}
input[type="file"]::file-selector-button:hover {
cursor: grab;
background-color: blueviolet;
color: white;
font-size: 1.2em;
box-shadow: inset 5px 10px 10px cornflowerblue;
}
</style>
</head>
<body>
<h3>Upload File (Firefox Compatible)</h3>
<form>
<label for="fup">Choose file:</label>
<input type="file" id="fup" />
<br><br>
<button type="submit">Upload</button>
</form>
</body>
</html>
A file upload form appears with a styled file selector button. On hover, the button changes to purple background with white text, larger font size, grab cursor, and an inset shadow effect.
Style File Upload Button With ::-webkit-file-upload-button
We have styled the file upload button with the ::-webkit prefix. This is the rendering engine utilized by WebKit-based browsers like Safari, Chrome, and Opera −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="file"] {
margin: 20px 0;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
}
input[type="file"]::-webkit-file-upload-button {
padding: 10px 20px;
border: none;
background-color: #f0f0f0;
color: #333;
border-radius: 3px;
cursor: pointer;
margin-right: 10px;
}
input[type="file"]::-webkit-file-upload-button:hover {
cursor: pointer;
background-color: crimson;
color: white;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
/* Cross-browser compatibility */
input[type="file"]::file-selector-button {
padding: 10px 20px;
border: none;
background-color: #f0f0f0;
color: #333;
border-radius: 3px;
cursor: pointer;
margin-right: 10px;
}
input[type="file"]::file-selector-button:hover {
cursor: pointer;
background-color: crimson;
color: white;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
</style>
</head>
<body>
<h3>Upload File (Cross-browser Compatible)</h3>
<form>
<label for="fup2">Choose file:</label>
<input type="file" id="fup2" />
<br><br>
<button type="submit">Upload</button>
</form>
</body>
</html>
A file upload form appears with cross-browser compatible styling. On hover, the button changes to crimson background with white text, larger font size, rounded corners (25% border-radius), and an inset shadow with cornsilk color.
Conclusion
The ::file-selector-button pseudo-element allows you to style file upload buttons, but requires both standard and WebKit prefixed versions for cross-browser compatibility. Use ::-webkit-file-upload-button for Chrome, Safari, and Opera support.
2K+ Views
