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 −

Open Compiler
<!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

Open Compiler
<!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>
Updated on: 2023-10-31T11:31:37+05:30

12K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements