文本欄中替換「選擇文件」

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按鈕，我希望看到一個文本欄充滿了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:"> 

但他們都去掉了file線。

我將添加一個onclick事件（用於啓動文件瀏覽器）和一個更改事件（用於在欄中顯示所選文件名），但在此之前，是否有人知道如何顯示上述條形圖？

此外，有沒有人知道如何顯示在同一行中的電子郵件欄和文件欄？

更新1：很高興知道Bootstrap FileStyle。但似乎在該字段中禁用了onclick事件。這裏是一個例子：JSBin。

Answer 1

您可以爲輸入創建一個label。這樣，當標籤被點擊時，它將聚焦輸入。請參見下面的演示：

.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; 
 
}

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