Javascript 包装在标签内时，输入[文件]不可聚焦

我想更改默认文件[input]的外观。所以我用这样的标签包装

<label class="btn upload-dir-btn btn-file">
Browse <input type="file" required id="dir-pic-file" name="dir-pic-file" novalidate>
</label>

}

但是如果我删除css，它就可以正常工作。这是我的确认

$('#add-dir-form').on('submit',function(e){

  var file = $('#dir-pic-file').val();
    if (file = '') {
        $('#pic-error').css({'display':'block'});
    }

    e.preventDefault();
    });

---

首先，要更改输入的样式，不需要将其放在标签标签中。您可以在css中使用输入[type=“file”]设置样式

---

尽量不要使用显示：无由于它将隐藏DOM树的输入，因此您无法访问它，请使用其他css。

am not sur，但可能您忘记了标签中的for属性，并删除了所需的

    <label for="dir-pic-file" class="btn upload-dir-btn btn-file">

<label class="btn upload-dir-btn btn-file">
Browse <input type="file" id="dir-pic-file" name="dir-pic-file" novalidate>
</label>

浏览

如果您正在制作控件

显示：无

，html5不知道如何验证控件。如果您通过javascript或jquery对其进行验证，并使其显示为

display:none

，那么您应该从中删除

required

。就这样吧

<label for="dir-pic-file" class="btn upload-dir-btn btn-file">
Browse <input type="file" id="dir-pic-file" name="dir-pic-file"  novalidate>
</label>

浏览

Firefox允许您在

显示中操作文件输入：无

，另一方面，Chrome不允许。它需要是

visibility:hidden

或

opacity:0

，然后移出页面，这样它就不会碍事。使用

可见性：隐藏和
位置：绝对查看代码段通过单击红色箭头在两个浏览器中测试它（可能需要几次时间，因为我将箭头放在很近的位置，就像在顶端…）好的，现在更新了，很明显


$（'adddirform'）。关于（'submit'，函数（e）{
var file=$（'#dir pic file'）.val（）；
如果（文件=“”）{
$（'#pic error'）.css({
“显示”：“块”
});
}
e、 预防默认值（）；
});
正文{
职位：相对
}
#dir-pic文件{
可见性：隐藏；
/*或不透明度：0*/
位置：绝对位置；
顶部：-500px；
}
.btn文件{
边框：3件镶嵌黑色；
位置：绝对顶部：50px；
左：50px；
光标：指针；
边界半径：16px；
填充：0 6px；
}
.btn文件：：之前{
内容：'\1f882'；
字体大小：20px；
颜色：红色；
垂直对齐：基线；
行高：.6
}

浏览
即使显示HTML5元素，您也可以使用javascriptYes访问它，我们可以访问它。但对于type=file，我们需要元素是可点击的。
<label for="dir-pic-file" class="btn upload-dir-btn btn-file">
Browse <input type="file" id="dir-pic-file" name="dir-pic-file"  novalidate>
</label>