## An ordinary input of the file type in HTML

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
There are three steps to this:  
### 1. Wrap the input file inside a `label` element

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

### 2. Change the display of the `input` tag to `none`


### 3. Style the `label` element
Here, you can add more elements or icons. This is where the magic comes in.





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

An ordinary input of the file type in HTML

Styling the input

1. Wrap the input file inside a label element

2. Change the display of the input tag to none

3. Style the label element

Code

Conclusion

1. Wrap the input file inside a `label` element

2. Change the display of the `input` tag to `none`

3. Style the `label` element