-1

I have the following code (JSBin) which creates a form:

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

Now I want to apply the style of Email to Choose file: I don't want to see the Choose file button, I want to see a text bar filled with Click to choose file: (as the text bar filled with Email:).

I tried

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

or 

<input name="file" id="file" type="file" class="form-control" style="position: relative; top: -1000px;" placeholder="Click to choose file:">

But they both removed the file line.

I will add an onclick event (to launch a file browser) and a change event (to display the chosen file name in the bar), but before that, does anyone know how to show the bar as I described above?

Additionally, does anyone know how to display the email bar and the file bar in the same line?

Update 1: It is good to know Bootstrap FileStyle. But it seems that onclick event is disabled in the field. Here is an example: JSBin.

Community
  • 1
  • 1
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
  • Is this different from [this question](http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file)? – fakedad Oct 03 '16 at 01:31
  • It is an alternative, but I still don't want to see the button, and the onclick event seems to be disabled. Please see my update... – SoftTimur Oct 03 '16 at 02:07

1 Answers1

1

You can create a label for the input. That way, when the label is clicked, it will focus the input. See demo below:

.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>
Sᴀᴍ Onᴇᴌᴀ
  • 8,218
  • 8
  • 36
  • 58