文件输入占位符

Question

我要放置“ cv”代替“未选择文件”，我试图在文件输入中添加占位符，但不起作用

        <div class="col-md-6 form-group ">

          <input type="file" class="col form-control text-field-box mt-3" name="cv" id="files" placeholder="CV" accept="application/pdf" required />
          <label class="ml-3 " 
          style="font-size: 13px;position: absolute;top: 0px;
          font-family: 'Roboto', sans-serif;font-weight: 300;">CV</label>

        </div>

Answer 1

请仔细检查我的代码，如果对此有任何疑问，请告诉我。 ：）

希望它会对您有所帮助。

.file-wrapper .col.form-control{
height: 20px;
background: transparent;
border: 0;
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 1;
}

.file-wrapper .ml-3{
font-size: 13px;
position: relative;
top: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
z-index: 0;
}

<div class="col-md-6 form-group file-wrapper">

    <input type="file" class="col form-control text-field-box mt-3" name="cv" id="files" placeholder="CV" accept="application/pdf" required />
    <label class="ml-3 " 
    style="font-size: 13px;position: absolute;top: 0px;
    font-family: 'Roboto', sans-serif;font-weight: 300;">CV</label>

  </div>

Answer 2

一种实现此目的的方法是隐藏输入本身，并通过按所需方式对其进行样式设置来将标签用作“伪输入”。您必须在输入上具有 id ，标签上必须具有 for 属性（与ID相同），因此，当您单击标签时，它将触发输入。然后使用一些基本的JavaScript，您可以更改标签的内容，例如占位符（未选择任何内容时）和文件名（选择时）。

隐藏输入的示例：

>>> x[:, np.newaxis, :]

array([[[1, 2, 3]],

       [[2, 3, 4]],

       [[3, 4, 5]]])