css - How to change upload file button color without using "display:none"

Question

I am currently using bootstrap for my HTML project. However, I am currently got stuck on how to change the color of upload file button. I tried to search on how to change it over the internet but everything uses display:none which hide the "no file chosen" or "the name file" appeared when the file is uploaded. That part is something that I really want to have.

This is the code that I have right now

<form method="POST" action="/uploadFile" enctype="multipart/form-data">
                                          <label class="btn btn-primary"> File Upload <input type="file" name="file" style="display: none"/></label><br/><br/>
                                          <input type="submit" value="Submit" class="btn-primary" data-toggle="modal" data-target="#myModal"/>
                                      </form>

How to change the button color to btn-primary without sacrificing the notice that it has from input type="file"?

/EDIT: This is what I have right now,

This is what I want but the style of the button is btn-primary

this is the code that I have to achieve on the second picture

<form method="POST" action="/uploadFile" enctype="multipart/form-data">
                                          <input type="file" name="file"/><br/><br/>
                                          <input type="submit" value="Submit" class="btn-primary" data-toggle="modal" data-target="#myModal"/>
                                      </form>

Looking at it, it looks like that it has an issue if it is operated within Mozilla or Opera. I prefer that the solution can work cross-browser. — Gagak
– Gagak, Commented Jun 3, 2020 at 5:32

bron · Accepted Answer · 2020-06-03 08:15:40Z

1

You may try this. I did not test it cross-browser but I think its no problem because the label is layered over the file input. You may change the css to have it in your styling.

Update: input type="file" for Bootstrap 3+4. Change the height at #form_upload .btn as commented in the css for Bootstrap 4.

<form id="form_upload" class="form-inline" action="/uploadFile" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <input id="file_upload" name="file" type="file" class="inputfile" data-multiple-caption="{count} files selected" multiple="multiple">
    <label for="file_upload" class="form-control"><span>Click to select file(s)</span></label>
    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Upload</button>
  </div>
  <br/><br/>
</form>

<script>
var inputs = document.querySelectorAll('.inputfile');
Array.prototype.forEach.call(inputs, function(input) {
  var label = input.nextElementSibling;
  var labelVal = label.innerHTML;
  input.addEventListener('change', function(e) {
    var fileName = '';
    if (this.files && this.files.length > 1)
      fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
    else
      fileName = e.target.value.split('\\').pop();
    if (fileName)
      label.querySelector('span').innerHTML = fileName;
    else
      label.innerHTML = labelVal;
  });
});
</script>

with this css

/* width of form */
#form_upload {
    display: block;
    max-width: 280px;
}
#form_upload .form-group {
    position: relative;
}
/* hide file input; width/height must be 1px! */
#form_upload .inputfile {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
}
/* label is new form-control */
#form_upload .form-control {
    /* next line: form-width minus button-width */
    width: 190px;
    margin-bottom: 1px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    font-weight: 400;
    color: #555;
}
/* mouse over (copied from BS3) */
#form_upload .inputfile:focus + .form-control,
#form_upload .inputfile + .form-control:hover {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}
/* no pointer-events on touchscreen  */
#form_upload .form-control * {
    pointer-events: none;
}
/* upload button */
#form_upload .btn {
    /* Bootstrap 4 => height: 38px; */
    height: 38px;
    margin-top: -1px;
    margin-left: -0.5em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* align middle on smartphone */
@media (max-width: 767px) {
    #form_upload .form-group,
    #form_upload .form-control {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
}

edited Jun 3, 2020 at 8:15

answered Jun 3, 2020 at 7:07

bron

1,5681 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bron Over a year ago

Edited the html so its more like your form. Removed a tiny bug from the JS. Tested on IE11, Edge, FF, Chrome and Opera.

Gagak Over a year ago

Oh, it works nicely, one question though... Is there a way to disable uploading multiple files? So, the upload will only accept one file

bron Over a year ago

Remove multiple="multiple" ; remove "(s)" after word "file" ; change the data attribute that it looks like data-multiple-caption="{count}" . Then you can select only 1 file.

Collectives™ on Stack Overflow

css - How to change upload file button color without using "display:none"

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related