How to pull the button of an input file (without JS) [duplicate]

Question

How to pull the button of an input file (without JS) [duplicate]

Navigation

#1 by (4 votes)

4

I have the following input file and wanted to know how to get the button, so in the box just show the file name

* I do not need JS, I have already seen some examples and I remember that they did not use JS, but I also do not remember what mode was used.

html css input file-upload

asked by anonymous 17.08.2016 / 23:44

1 answer

Select that shows all tables that have fields with specific data type Laravel 5.2 with pagination

score 4 · Accepted Answer

I would do so using bootstrap

Part 1. HTML

<div class="fileUpload btn btn-primary"> 
    <span>Upload</span>
    <input type="file" class="upload" /> 
</div>

Part 2. CSS

.fileUpload {
    position: relative; 
    overflow: hidden; 
    margin: 10px; 
}
.fileUpload input.upload { 
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 0; 
    padding: 0; 
    font-size: 20px; 
    cursor: pointer; 
    opacity: 0; 
    filter: alpha(opacity=0); 
}

Without botstrap you can do this:

/* CSS */
input[type="file"] {
  display: none;
}

<!-- HTML -->
<label class="custom-file-upload">
  <input type="file"/>
  Clique aqui para upload
</label>