Disable default form style

Question

I am not good at front-end at all but some circumstances made me to learn it.

In my app I need to upload file. I do something like this

 <div class="modal-footer">
 <div class="col-md-12">
  <form action="" method="post" enctype="multipart/form-data">
   <div class="col-md-6">
    <input type="file" name="file" id="file" class="btn btn-primary btn-sm" display: block;
        cursor: pointer />     
    <input type="submit" class="btn btn-primary btn-success btn-sm" style="margin-top: 10px; margin-right: 1500px" />
   </div>       
  </form>
 </div>         
 <button class="btn btn-primary" data-dismiss="modal" id="conventionClick">Apply changes</button>
</div>

But the result is awful. I need to get rid of this

https://ibb.co/kBnmfy

How do I remove "choose file" && "no file chosen". I just want a simple button which opens files explorer.

Thanks!

Possible duplicate of [Change the "No file chosen":](https://stackoverflow.com/questions/16001586/change-the-no-file-chosen) — shmnff, Jun 03 '18 at 13:16

score 1 · Answer 1 · answered Jun 03 '18 at 13:13

You need something like this:

.upl-wrp {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 1px solid black;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upl-wrp input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

<div class="modal-footer">
    <div class="col-md-12">
 <form action="" method="post" enctype="multipart/form-data">
     <div class="col-md-6">

<div class="upl-wrp">
    <button class=btn>Just a button to click</button>
  <input type="file" name="file" id="file" class="btn btn-primary btn-sm" display: block;
  cursor: pointer />
</div>
  <input type="submit" class="btn btn-primary btn-success btn-sm" style="margin-top: 10px; margin-right: 1500px" />
     </div>       
 </form>
    </div>         
<button class="btn btn-primary" data-dismiss="modal" id="conventionClick">Apply changes</button>
</div>

score 1 · Answer 2 · answered Jun 03 '18 at 13:18

You can’t modify input[type=file].

But you can hide this input and modify label.

/* Hide */
.custom-input {
  opacity: 0;
  position: absolute;
  left: -9999px;
  z-index: -1;
}

/* Customize */
.custom-label {
  font-size: 18px;
  width: 300px;
  text-align: center;
  padding: 8px 16px;
  border: 1px solid #aaa;
  font-family: Verdana;
}

body {
  margin: 30px;
}

<input type="file" name="file" id="file" class="custom-input" />
<label for="file" class="custom-label">Browse...</label>

Disable default form style

2 Answers2