Question

我想隐藏用户上传文件的浏览按钮。我该怎么做？

.fa-cloud-upload {
    position: absolute;
    top: 5%;
}

<label class="file_upload">
     <input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>

Answer 1

您可以隐藏输入并在用户点击图标时触发输入：

＆＃13;

Click the image to select file
<br>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/open-file-icon.png" width="50" height="50" onclick="document.getElementById('mycustomid').click();" style="cursor: pointer;">
<input type="file" id="mycustomid" style="visibility: hidden;" />

＆＃13;

Answer 2

您可以隐藏输入并使用标签打开文件，请参阅下面的示例：

<label for="myInputFile">
  <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/699329-icon-57-document-download-128.png">
  <input type="file" name="myInputFile" id="myInputFile" style="display:none;" />
</label>

Answer 3

Simpy添加display: none;以隐藏输入元素。

input {
   display: none;
}

Answer 4

只需隐藏您的文件输入字段。

label input[ type="file" ] {
  display: none;
}

<label>
  <input type="file" />
  <span>Icon</span>
</label>

Answer 5

你可以这样做。您的Font-Awesome图标应该出现在您在环境中尝试的位置。：

    .file_upload {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }
    
    .btn {
      border: 0px solid gray;
      color: blue;
      background-color: white;
      padding: 8px 20px;
      border-radius: 8px;
      font-size: 20px;
      font-weight: bold;
    }
    
    .file_upload input[type=file] {
      font-size: 100px;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;

    }

<div class="file_upload">
  <button class="btn"><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 15px;">X</i></button>
  <input type="file" name="uploads" accept="image/*, video/*"/>
</div>

Answer 6

使用input

隐藏display:none

.fa-cloud-upload {
  position: absolute;
  top: 5%;
}
.file_upload input[type="file"]{display:none}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<label class="file_upload">
  <input type="file" name="uploads" accept="image/*, video/*"/>
  <i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 25px;"></i>
</label>

Answer 7

.fa-cloud-upload {
    position: absolute;
    top: 5%;
}

<label class="file_upload">
     <input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>

输入文件类型已隐藏

7 个答案: