Question

我想使用标签作为技巧来创建自定义文件输入：

    input[type="file"] {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    
    section {
    	padding: 30px;
    	border: 1px solid lightgray;
    	width: 200px;
    	margin: 100px;
    }
    
    label {
        display: block;
    }

    <section>
    	<label for="test">
    	    <input type="file" id="test">
    	    <button>Click me</button>
        </label>
    </section>

但是，当我单击标签内的按钮时，它不会打开文件弹出窗口，仅当我在其外部单击时才打开。我怎样才能做到这一点？

Answer 1

输入应位于按钮元素的前面，并将with设置为按钮的宽度。

看到代码段，我做了一些更改。

  input[type="file"] {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 61px;
  }

section {
    padding: 30px;
    border: 1px solid lightgray;
    width: 200px;
    margin: 100px;
}

label {
  display: block;
  position: relative;
}

<section>
    <label for="test">
      <input type="file" id="test">
      <button>Click me</button>
 </label>
</section>

Answer 2

<section>
    <label for="test">
      <input type="file" id="test">
      <button onclick="document.querySelector('#test').click()">Click me</button>
 </label>
</section>

您可以在按钮上触发点击事件，以模拟对输入的点击

Answer 3

您可以在label标记内输入button并尝试。

请确保重置button填充并为label标签赋予样式。

input[type="file"] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

button {
  padding: 0;
}

section {
  padding: 30px;
  border: 1px solid lightgray;
  width: 200px;
  margin: 100px;
}

label {
  display: block;
  padding: 1px 7px 2px;
}

<section>

  <input type="file" id="test">
  <button><label for="test">Click me</label></button>

</section>

JSFiddle link

标签内的HTML按钮不会触发文件上传

3 个答案: