SoftTimur SoftTimur - 2 months ago 6
CSS Question

A text bar that replaces "Choose file"

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.

Answer

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>