Styled File Upload Button Template

Replace the ugly, inconsistent default file input with a clean, custom-styled upload button.

This template visually hides the native input type="file" and uses a styled label to trigger it, providing a consistent, branded, and user-friendly file selection experience.

Get Source Code → Preview →

About this Styled File Upload Button

The default browser input type="file" is difficult to style and looks different on every browser and OS. This template demonstrates the standard, accessible method for creating a custom file upload interface.

The technique is as follows:

The real input type="file" is visually hidden using CSS, but it remains fully functional.
Its corresponding label is styled to look like a button (e.g., "Choose File...").
Because the label is programmatically linked to the input with the for attribute, clicking the stylish "button" will open the native file picker dialog, just as if you had clicked the original input.
A small, self-contained JavaScript snippet is added to help with keyboard accessibility, and to provide essential user feedback by displaying the name of the file next to the button after the user has selected one.

Features

Consistent, Branded Look: You have full CSS control over the appearance of the trigger button.
User-Friendly Feedback: The JavaScript part that displays the chosen filename confirms to the user that their selection was successful.
Fully Accessible: The use of a native input and a properly associated label makes this pattern 100% accessible to keyboard and screen reader users.
Specific File Types: Demonstrates the `accept` attribute to suggest which file types the user should upload (e.g., .pdf, .docx).

Dependencies

Uses HTML and CSS, with a small JavaScript block for keyboard accessibility and displaying the selected filename.

Code

Here's the full code for the styled file upload button:

/* -- The core styles -- */
/* Use Flexbox for robust layout control */
.file-upload-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Creates space between the button and the text */
}

/* Visually hide the file input, but it's still accessible via its label */
.file-upload-input {
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* This is the <label> that we style to look like a button */
.file-upload-label {
    background-color: #34495e;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    white-space: nowrap;
    flex-shrink: 0; /* Prevents the button from shrinking */
}
.file-upload-label:hover {
    background-color: #2c3e50;
}
/* Keyboard focus style for the label "button" */
.file-upload-label:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* This is the <span> where we display the file name */
.file-name-display {
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
    
    /* These properties ensure the text doesn't get cut off */
    flex-grow: 1; /* Allows it to take up remaining space */
    min-width: 0; /* Allows flex items to shrink properly */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

<div class="file-upload-container">
    <h3>Upload Your Document</h3>
    <form action="#" method="post" enctype="multipart/form-data">
        <div class="file-upload-group">
            <input type="file" id="custom-file-upload" class="file-upload-input" name="document" accept=".pdf, .doc, .docx, .txt">
            
            <label for="custom-file-upload" class="file-upload-label" tabindex="0">Choose File...</label>
            
            <span class="file-name-display" id="file-chosen">No file selected</span>
        </div>
    </form>
</div>

<script>
const customFileInput = document.getElementById('custom-file-upload');
const fileChosenDisplay = document.getElementById('file-chosen');
const fileUploadLabel = document.querySelector('.file-upload-label[for="custom-file-upload"]');

if (customFileInput && fileChosenDisplay && fileUploadLabel) {
    // Update display text when a file is chosen
    customFileInput.addEventListener('change', function(){
        fileChosenDisplay.textContent = this.files.length > 0 ? this.files[0].name : 'No file selected';
    });

// Add keyboard accessibility: allow 'Enter' or 'Space' to trigger the file input
    fileUploadLabel.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault(); // Prevent default button behavior
            customFileInput.click(); // Programmatically click the hidden file input
        }
    });
}
</script>

View Output