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

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. 

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

Styling the input file type

Code

Conclusion