how can i disble the text part of input type="file"-CodePudding

I'm creating a form but I don't want input type"file" to shown, I mean it should work but Choose File button and No file chosen part shouldn't be shown.

here's my HTML code

                     <div class="row">
                      <div class="form-group col-md-12">
                        <label>File upload</label>
                        <div class="input-group col-xs-12 ">
                          <input type="file" id="files" name="files[]" class="form-control btn btn-primary mb-xl-4"  multiple>                        
                        </div>  
                       </div>  
                      </div>

here's how it's shown

how code works

CodePudding user response：

Try this

<div class="row">
  <div class="form-group col-md-12">
  <label>File upload</label>
  <div class="input-group col-xs-12 ">
    <input type="file" id="files" name="files[]" style="display:none"  class="form-control btn btn-primary mb-xl-4"  multiple>            
    <button  onclick="document.getElementById('files').click()">Choose Files</button>
    </div>  
  </div>  
</div>

CodePudding user response：

It's possible to hide to the input element and make the surrounding element clickable, so it triggers the 'Choose file' popup from the browser. Therefore you should add an id or exclusive class to the parent element.

                    <div class="row">
                      <div class="form-group col-md-12">
                        <label>File upload</label>
                        <div class="input-group col-xs-12" id="files">
                          <input type="file" name="files[]" class="form-control btn btn-primary mb-xl-4"  multiple>                        
                        </div>  
                       </div>  
                      </div>

#files {
  width: 100px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}

#files input=[type="file"] {
  height: 100%;
  width: 100;
  opacity: 0;
  cursor: pointer;
}

You're also able to make a button with the label in this way if you move the files id to the form-group div.