html 使视觉上隐藏的字段成为必填字段

djmepvbi  于 2023-10-14  发布在  其他
关注(0)|答案(3)|浏览(120)

这是我的代码:

<label for="uploadFile" class="custom-uploadFile">
    <i class="fa fa-cloud-upload"></i> UPLOAD ID
  </label>
  <input class="form-control input-lg"  name="picture" id="uploadFile" type="file" style="display:none;" required>

我想让这个上传字段是必填的,但输入是隐藏的。
我必须使用一些JavaScript。或者我可以用什么来解决这个问题?我看了很多教程,但他们没有工作!

2mbi3lxu

2mbi3lxu1#

如果你想看到表单验证信息,你可以使用opacity隐藏输入。

#uploadFile {
  opacity: 0;
  width: 0;
  float: left; /* Reposition so the validation message shows over the label */
}

div {
    text-align: center;
}
<form>
<input name="picture" id="uploadFile" type="file" required>

<label for="uploadFile">Upload label</label>
				
<div><input  name="submit" type="submit"></div>
</form>
qnzebej0

qnzebej02#

但我认为这是一个很好的方法,我还补充说,

pointer-events: none;

输入。所以用户不能点击它,光标也不会改变悬停。

x8goxv8g

x8goxv8g3#

这是我的工作,你不能设置高度为0:

input {
        opacity: 0;
        height: 1px;
        display: block
   }

相关问题