Ordinary input of type file in webpages comes with a default style and the caption, "Choose file".
The good news is that we can style and tweak it to what we want.

# 
## Styling the input file type

There are three steps to styling the input file in forms: 

1. Wrap the `<input>` element with the `type="file"` attribute inside a `<label>` element. Also, we can add more elements or icons within a `<label>` element.

<label for="inputTag">
  Select Image
  <input id="inputTag" type="file"/>
</label>

2. Change the display of the `input[type="file"]` tag to `none` in CSS:


<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
  <script src="https://use.fontawesome.com/3a2eaf6206.js"></script>
	<title>repl.it</title>
  <style>

      div{
        text-align:center;
        padding:3%;
        border:thin solid black;
      }
      
      input[type="file"]{
        display: none;
      }

      label{
        cursor:pointer;
      }
      
      #imageName{
        color:green;
      }
  </style>
</head>

<body>
    <div>
      <label for="inputTag">
        Select Image <br/>
        <i class="fa fa-2x fa-camera"></i>
        <input id="inputTag" type="file"/>
        <br/>
        <span id="imageName"></span>
      </label>
    </div>

    <script>
        let input = document.getElementById("inputTag");
        let imageName = document.getElementById("imageName")

        input.addEventListener("change", ()=>{
            let inputImage = document.querySelector("input[type=file]").files[0];

            imageName.innerText = inputImage.name;
        })
    </script>
  </body>
</html>

codemirror

# Conclusion
We have looked at how to style the input file type that normally appears in a default "Choose file" format. One of these ways is to set the `display` to `none`. This way, we can style the label and add some icons. 


How you can style the input file type in forms using CSS

Wrap the input file in a label, hide the input via CSS, then style the label.

How you can style the input file type in forms using CSS

Styling the input file type

Code

Conclusion