如何使用 CSS 在表单中设置input file 类型的样式 How you can style the input file type in forms using CSS

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.

<input type="file" accept="image/png, image/jpg, image/gif, image/jpeg"/>

 

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

input{
  display: none;
}

3. Style the label element

Here, you can add more elements or icons. This is where the magic comes in.

label{
    cursor: pointer;
}

Code

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

 

如何使用 CSS 在表单中设置input file 类型的样式 How you can style the input file type in forms using CSS
标签: