Getting Started with CSS

🧱 The Problem with

Browsers render file inputs differently, and most won’t let you change much about their appearance. You can’t easily control the button text, style the input directly, or make it match your theme out of the box.

So what's the workaround? Hide the default input and trigger it with a styled button or label.

---

✅ HTML Structure

📁 Choose a file

No file chosen

What’s going on here?

We hide the default file input with hidden.

The is styled to look like a button and is linked to the input via the for attribute.

A

element displays the selected file name using JavaScript.

---

🎨 CSS Styling

Here’s some CSS to make it look modern and clean:

.upload-container {
font-family: sans-serif;
text-align: center;
margin: 2rem;
}

.upload-label {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: #4f46e5;
color: white;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease;
}

.upload-label:hover {
background-color: #4338ca;
}

.file-name {
margin-top: 1rem;
font-size: 0.9rem;
color: #555;
}

---

💡 Add a Touch of JavaScript

To display the selected file name, use this simple JS snippet:

const input = document.getElementById("file-upload");
const fileName = document.getElementById("file-name");

input.addEventListener("change", () => {
fileName.textContent = input.files.length
? input.files[0].name
: "No file chosen";
});

---

🧪 Demo in Action

Here’s what the result looks like:

👉 A stylish button
📎 A file name preview
💯 Pure HTML, CSS, and a dash of JS

---

🚀 Tips for Production

Add accept="image/*" to limit file types if needed.

You can enhance accessibility with ARIA attributes.

Consider drag-and-drop for a more advanced UX (save that for another post 😉).

@devsyncin

---