Question

我想更改默认文件[输入]外观。所以我已经包装在像这样的标签里

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

我在提交表单时做了一些验证。但是当我得到错误时

名称无效的表单控件=＆＃39; dir-pic-file＆＃39;不可专注。

这是隐藏默认文件的css

#dir-pic-file{
display: none;

}

但如果我删除CSS它工作正常。这是我的验证

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

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

    e.preventDefault();
    });

Answer 1

Firefox允许您在display:none时操作文件输入，但另一方面Chrome并不令人遗憾。它必须是visibility:hidden或opacity:0，然后移出页面，这样它就不会妨碍。使用visibility:hidden和position:absolute;使用两个浏览器通过单击红色箭头对其进行测试（可能需要几次，因为我将箭头放在靠近的位置，它就像在尖端一样。 ..）好的，现在更新它很明显。

＆＃13;

$('#add-dir-form').on('submit', function(e) {

  var file = $('#dir-pic-file').val();
  if (file = '') {
    $('#pic-error').css({
      'display': 'block'
    });
  }

  e.preventDefault();
});

＆＃13;

body {
  position: relative
}

#dir-pic-file {
  visibility: hidden;
  /* or opacity:0;*/
  position: absolute;
  top: -500px;
}

.btn-file {
  border: 3px inset black;
  position: absolute top:50px;
  left: 50px;
  cursor: pointer;
  border-radius: 16px;
  padding: 0 6px;
}

.btn-file::before {
  content: '\1f882';
  font-size: 20px;
  color: red;
  vertical-align: baseline;
  line-height: .6
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn upload-dir-btn btn-file">
Browse <input type="file" required id="dir-pic-file" name="dir-pic-file" novalidate>
</label>

＆＃13;

Answer 2

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

尽量不要使用 display：none; ，因为它会隐藏DOM树的输入，因此您无法访问它，请使用其他一些css。

Answer 3

不是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>

Answer 4

如果你正在制作一个控件display:none，那么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>

在Label中包装时，input [file]不可聚焦

4 个答案: