Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS Styling of File Upload Button with 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
The syntax of CSS file-selector property is as follows −
Selector::file-selector-button {
attribute: /*value*/
}
Selector::-webkit-file-upload-button {
attribute: /*value*/
}
Style File Upload Button With ::file-selector-button
The following example illustrate CSS file-selector-button selector. On hover, we have styled it like this −
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;
}
Notice the cursor property −
cursor: grab;
Example
Let us see the example to style the File Upload Button with ::file-selector-button −
<!DOCTYPE html>
<html>
<head>
<style>
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>
<h1>Upload</h1>
<form>
<label for="fup">Click to</label>
<input type="file" id="fup" />
<input type="text" placeholder="Random Text here" />
<button type="submit">Done</button>
</form>
</body>
</html>
Style File Upload Button With ::-webkit-file-selector-button
We have styled the file upload button with the ::-webkit prefix. It is he rendering engine utilized by web browsers to interpret and display CSS and HTML −
input[type=file]::-webkit-file-upload-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
Notice the cursor property −
cursor: pointer;
Example
Let us see the example to style the File Upload Button with ::-webkit-file-selector-button
<!DOCTYPE html>
<html>
<head>
<style>
input[type=file]::file-selector-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
input[type=file]::-webkit-file-upload-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
</style>
</head>
<body>
<h1>Upload</h1>
<form>
<label for="fup">Click to</label>
<input type="file" id="fup" />
<input type="text" placeholder="using webkit prefix" />
<button type="submit">Done</button>
</form>
</body>
</html>
2K+ Views
