CSS agregar estilos a inputs para subir archivos

Estos estilos en campos de archivo están pensados para ser usados con Contact Form7 sin embargo pueden usarse con HTML puro u otro plugin, lo importante es fijarse en las clases usadas para que funcione.

Usando HTML

<label class="uploader">
        <span class="wpcf7-form-control-wrap" data-name="file-761">
            <input size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.png" aria-invalid="false" type="file" name="file-761">
        </span>
        <span class="file-name-label">Seleccionar archivo</span>
    </label>

Usando Contact Form 7

<label class="uploader">[file file-761 limit:5MB filetypes:jpg|png id:imagen1]<span class="file-name-label">Seleccionar archivo</span><button type="button" class="remove-file-btn" style="display: none;">&times;</button></label>

Aplicando estilos CSS

Estos estilos funcionan tanto para HTML como usando Contact Form7 en WordPress

.uploader {
    display: inline-block;
    padding: 10px;
    border: 2px solid #ccc;
    cursor: pointer;
}

/* Ocultamos el campo file y dejamos solo el label visible */
.uploader input[type="file"] {
    display: none; /* Hide default file input */
}

/* Cambiamos el color si se ha elegido un archivo */
.uploader.active {
    background-color: green;
    color: white;
}

.file-name-label {
    margin-left: 10px;
}

Mostrar el nombre del archivo seleccionado

Usando un poco de javascript haremos que al seleccionar un archivo aparezca el nombre dentro de la etiqueta label

document.addEventListener('DOMContentLoaded', function () {
    const fileInputs = document.querySelectorAll('.wpcf7-file');
    
    fileInputs.forEach(input => {
        input.addEventListener('change', function() {
            // Change background color to green for the specific file input's label
            const uploaderLabel = input.closest('.uploader');
            uploaderLabel.classList.add('active');

            // Display the filename in the label
            const fileName = input.files[0] ? input.files[0].name : 'Seleccionar archivo';
            const label = uploaderLabel.querySelector('.file-name-label');
            label.textContent = fileName;
        });
    });
});

Se pueden agregar más detalles como por ejemplo que sean múltiples archivos para elegir o agregar un botón para retirar el archivo elegido