Hello:
I am trying to customize the input file of a form, but when I put the corresponding styles, it is modified well, when I click to select the file, the window opens, but when I select it, then the name of the file does not appear next to the button and I don't know how to do it.
HTML
<div style="margin-left: 225px; margin-top: -65px;" id="carta_nominador_div">
<label for="carta_nominador" style="color: #fff; background: #000; width: 142px; height: 52px; border-radius: 100px;cursor: pointer;">
<span class="iborrainputfile">ATTACH FILE</span>
</label>
<input type="file" name="carta_nominador" id="carta_nominador" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple="">
</div>
CSS
.iborrainputfile { font-size: 14px; font-weight: normal; position: absolute; margin-top: 17px; margin-left: 25px; }
.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.inputfile-1 + label { color: #fff; background-color: #000; }
.inputfile + label { max-width: 80%; cursor: pointer; padding: 0.625rem 1.25rem; width: 142px; border-radius: 25px; height: 52px; }
How could I make the name of the selected file appear?
Thank you very much, greetings
By hiding the browser control, you are also hiding the inner tag where the name of the selected file is displayed. The component cannot be partially hidden, so you could retrieve the selected file yourself and display it in your own label.
I have modified the styles a bit so that it is displayed correctly. I have added a tag
span
withid='fichero_seleccionado'
to show the name of the selected file.What we do here is subscribe to the event
change
of the file control and retrieve the value of the component to display it.