Question

我有以下代码（JSBin），它创建了一个表单：

  <form class="form" method="post" action="upload.php">
    <div class="form-group email">
      <!-- <label class="sr-only" for="email">Email</label> -->
      <input name="f_email" id="email" type="email" class="form-control" placeholder="Email:">
    </div>
    <div class="form-group file">
      <!-- <label class="sr-only" for="file">File</label> -->
      <input name="file" id="file" type="file" class="form-control" placeholder="Click to choose file:">
    </div>
    <button type="submit">Upload</button>
  </form>

现在我想将Email的样式应用于Choose file：我不想看到Choose file按钮，我希望看到一个文本栏中填充{ {1}}（文字栏中填充了Click to choose file:）。

我试过

Email:

或

<input name="file" id="file" type="file" class="form-control" style="visibility: hidden; display: none;" placeholder="Click to choose file:">

但他们都删除了<input name="file" id="file" type="file" class="form-control" style="position: relative; top: -1000px;" placeholder="Click to choose file:">行。

我将添加一个onclick事件（用于启动文件浏览器）和一个更改事件（在条形图中显示所选的文件名），但在此之前，是否有人知道如何如上所述显示该栏？< / p>

此外，是否有人知道如何在同一行显示电子邮件栏和文件栏？

更新1：很高兴知道Bootstrap FileStyle。但似乎onclick事件在现场被禁用。以下是一个示例：JSBin。

Answer 1

您可以为输入创建label。这样，当单击标签时，它将聚焦输入。见下面的演示：

＆＃13;

.fakeInput {
  border: 1px solid #9199a1; 
  color: #9199a1; 
  padding: 1px; 
  margin: 2px; 
  font-size: 13.3333px;
  font-family: "Arial";
  text-transform: none;
  letter-spacing: normal;
  text-align: start;
  width: 180px;
}

＆＃13;

<div class="form-group email">
      <!-- <label class="sr-only" for="email">Email</label> -->
      <input name="f_email" id="email" type="email" class="form-control" placeholder="Email:">
    </div>
    <div class="form-group file">
      <input name="file" id="file" type="file" class="form-control" style="visibility: hidden; display: none;">
      <label for="file" class="fakeInput">Click to choose file:</label>
    </div>

＆＃13;

替换＆＃34;选择文件＆＃34;

1 个答案: