Buenos días:
estoy intentando personalizar el input file de un formulario, pero cuando le pongo los estilos correspondientes, se modifica bien, cuando le doy para seleccionar el archivo se abre la ventana, pero cuando lo selecciono, luego no me aparece el nombre del archivo al lado del botón y no sé como hacerlo.
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; }
Cómo podría hacer para que me aparezca el nombre del archivo seleccionado?
Muchas gracias, un saludo