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

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>