Personalizzare gli elementi input di tipo file con i CSS

In questo articolo vedremo come personalizzare gli elementi input di tipo file con i CSS in modo da adattare il loro layout alle esigenze di design del nostro progetto.

Partiamo da questa struttura HTML minimale:

<form>
    <div class="file-input">
        <input type="file" name="test" id="test">
    </div>
</form>

Abbiamo racchiuso il nostro elemento input in un contenitore in modo da poter applicare gli stili principali all'elemento con classe file-input invece che provare a modificare direttamente gli stili del campo, cosa che incontrerebbe nel modello predefinito del browser un ostacolo praticamente insormontabile. Il campo verrà infatti nascosto in modo accessibile, ossia senza usare laa dichiarazione display: none.

Vediamo ora gli stili che verranno applicati:

.file-input {
    margin: 1rem 0;
    position: relative;
    display: inline-block;
}

.file-input input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.file-input::before {
    content: 'Scegli File';
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #007bff;
    color: #fff;
    border-radius: 0.25rem;
    cursor: pointer;
}

.file-input:hover::before {
    background: #0056b3;
}

Si tratta di una struttura a due livelli: il livello base è costituito dal contenuto generato che va a costituire il layout visibile del nostro campo mentre il livello superiore è il campo stesso, nascosto con la dichiarazione opacity: 0. È di importanza fondamentale che il livello superiore sia il campo in modo da lanciare la finestra di selezione dei file del sistema operativo quando si effettua un click su di esso. Il contesto del posizionamento assoluto viene qui garantito dalla dichiarazione position: relative applicata all'elemento contenitore.

In conclusione, non è consigliabile applicare direttamente gli stili CSS principali al campo di input ma occorre far ricorso ad un elemento contenitore per ottenere lo scopo che ci siamo prefissati.

Torna su