How to take the button out of an input file (without JS)

Asked

Viewed 2,415 times

4

I got the following input file and wanted to know how to remove the button, so that in the box show only the name of the file

inserir a descrição da imagem aqui

*It is not necessary JS, I have seen some examples and remember that they did not use JS, but also do not remember which mode was used.

html css input file-upload
  • 2

    @Murilogambôa really is duplicated, and here has the answer to your question, keeping the file name as you want.

  • Note that the answers given in the other question produce the final result simulating the text box, because the button set with the original box are indivisible in the current specifications. But there you find the separate label solution, as mentioned, and how to make the text "box" to replace the original.

  • 1

    Here are some examples of a bootstrap plugin: basic and Advanced

  • To facilitate the understanding of closing by duplicate: If we were to consider "literally" the question, the only valid answer would be "there is no way to do it", then at least a way around the situation was pointed out. In the specification, the button with the box was designed as a single control, and anything that acts separately in the elements is liberality of the vendor.

1 answer

4


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 so:

/* CSS */
input[type="file"] {
  display: none;
}
<!-- HTML -->
<label class="custom-file-upload">
  <input type="file"/>
  Clique aqui para upload
</label>

Browser other questions tagged html css input file-upload

You are not signed in. Login or sign up in order to post.