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

CSSWeb DevelopmentFront End Technology

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.

::-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*/
}

Example

The following examples illustrate CSS file-selector-button selector.

 Live Demo

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

This gives the following output in Firefox web browser.

Example

 Live Demo

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

This gives the following output in Google Chrome.

raja
Published on 10-Feb-2021 17:07:51
Advertisements