CSS自定义文件上传按钮失效：点击无响应如何排查问题？

你遇到的问题核心是label标签的for属性与file input的id不匹配，导致点击自定义按钮（label）无法关联到隐藏的原生文件输入框，因此触发不了文件选择弹窗。

错误点分析 #

你的HTML中，label的for属性值是img，但对应的file input的id是file-input，两者必须完全一致才能建立关联，这是label触发对应input交互的核心规则。

修正后的代码 #

HTML代码

<div class="create-input">
    <div class="custom-file-upload">
        <label for="file-input" class="img">Télécharger une image</label>
    </div>
    <div>
        <input type="file" name="img" id="file-input" class="custom-file-upload" required />
    </div>
</div>

CSS代码

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

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

补充说明 #

也可以选择将file input的id改为img来匹配label的for属性，两种方式都能解决问题。只要保证label的for值和目标input的id完全一致，点击label时就会自动触发input的文件选择功能。

内容的提问来源于stack exchange，提问作者Caroline Dorchies