「ファイルを選択し、」置き換えテキストバー

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> 

は今、私はChoose fileにEmailのスタイルを適用したい：私はしたくありません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>