Style an HTML File Input Button with CSS

You will learn why file inputs need special styling, how to target their built-in button with CSS, and how to build an accessible custom file-picker control when you need complete visual control.

<input type="file"> lets a user choose one or more files from their device. Browsers render it as a special native control because it opens the operating system's file picker.

A file input usually contains two visible parts:

• A file-selection button, often labelled Choose File or Browse.
• A file name area, which displays the selected file name or a message such as “No file chosen.”

You cannot reliably style every part of this native control in the same way as a normal <button>. However, modern browsers provide the ::file-selector-button CSS pseudo-element for styling the built-in file-selection button.

This matters because upload controls should match an application's design while remaining usable with a mouse, keyboard, and assistive technologies. For designs that need more control than the native input allows, keep the real file input available and connect it to a styled <label>.

Think of a file input as a secure receptionist at a building.

• You can decorate the receptionist's button using ::file-selector-button.
• You cannot replace the receptionist with ordinary JavaScript and directly access a visitor's files. The browser protects the user's device.
• If you want a completely different-looking entrance, you can place a well-designed sign—an associated <label>—that tells the receptionist to open the file picker.

The real <input type="file"> remains responsible for opening the file picker and storing the user's selected file.

Use the ::file-selector-button pseudo-element to target the button inside a file input.

<label for="resume">Upload your resume</label>
<input id="resume" type="file" accept=".pdf,.doc,.docx" />

input[type="file"] {
  font: inherit;
  color: #374151;
}

input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  border: 0;
  border-radius: 0.4rem;
  padding: 0.65rem 1rem;
  background: #2563eb;
  color: white;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: #1d4ed8;
}

input[type="file"]::file-selector-button:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

The selector input[type="file"] selects file inputs. Adding ::file-selector-button targets only the native button inside that input, leaving the selected file name area alone.

font: inherit is useful because native form controls otherwise may use a browser-default font instead of the font used by the rest of the page.

For older Safari implementations, this optional fallback can help:

input[type="file"]::-webkit-file-upload-button {
  margin-right: 0.75rem;
  border: 0;
  border-radius: 0.4rem;
  padding: 0.65rem 1rem;
  background: #2563eb;
  color: white;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

Prefer ::file-selector-button as the primary rule. The ::-webkit-file-upload-button selector is vendor-prefixed and is only a compatibility fallback.

Consider this example:

<input id="avatar" type="file" accept="image/*" />
<p id="status">No file selected.</p>

<script>
  const input = document.querySelector("#avatar");
  const status = document.querySelector("#status");

  input.addEventListener("change", () => {
    const file = input.files[0];
    status.textContent = file
      ? `Selected: ${file.name}`
      : "No file selected.";
  });
</script>

What happens:

1. The browser renders the file input and its native file-selection button.
2. The user selects a file through the operating system's file picker.
3. The browser stores the chosen files in input.files, a FileList.
4. Selecting or clearing a file triggers the change event.
5. input.files[0] reads the first selected File, or is undefined when no file is selected.
6. The conditional expression displays the file name when a file exists; otherwise it restores the default message.

CSS affects the input's appearance, but JavaScript is what reads the selected file's metadata or sends the file to a server.

File inputs are commonly used for:

• Profile image uploads in account settings.
• Resume or portfolio uploads in job applications.
• Document attachments in support tickets and messaging apps.
• Importing CSV files into reporting or admin tools.
• Product image uploads in e-commerce dashboards.
• Bulk data uploads for internal business tools.

In each case, styling helps the upload control fit the interface, while the actual file selection must still be initiated by the user.

In real projects, developers often combine a native file input with validation and clear feedback.

Validate before uploading

The accept attribute helps guide users, but it is not security validation. Validate the file type and size in the client for user feedback, and validate again on the server before storing it.

function validateImage(file) {
  if (!file) return "Choose an image first.";
  if (!file.type.startsWith("image/")) return "Please choose an image file.";
  if (file.size > 2 * 1024 * 1024) return "The image must be 2 MB or smaller.";
  return null;
}

Use a label for a fully custom-looking trigger

A <label for="..."> activates its associated input. This is a robust pattern because it preserves normal browser behavior and keyboard access.

<input class="visually-hidden" id="attachment" type="file" />
<label class="upload-button" for="attachment">Choose an attachment</label>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-button {
  display: inline-block;
  border-radius: 0.4rem;
  padding: 0.65rem 1rem;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

Do not use display: none for the input if you need it to remain available to assistive technology. A visually-hidden technique keeps it in the document while removing it from the visible layout.

Upload with FormData

When sending a selected file with fetch, put it into FormData.

const data = new FormData();
data.append("avatar", input.files[0]);

await fetch("/api/avatar", {
  method: "POST",
  body: data
});

Do not manually set the Content-Type header for this request. The browser sets the required multipart boundary when it sends FormData.

Trying to set a file input's value

Browsers prevent scripts from assigning a local path to a file input for security reasons.

// This does not let your app choose a file on the user's computer.
input.value = "/Users/sam/private-file.pdf";

A user must choose the file through the browser's file picker. You may clear a selection with input.value = "".

Styling a normal button instead of the native file button

/* This targets a button element, not the button inside a file input. */
button {
  background: blue;
}

Use input[type="file"]::file-selector-button, or use a label associated with the input.

Using only accept as security protection

<input type="file" accept="image/*" />

accept is a selection hint, not a guarantee. A malicious or unusual client can still submit an invalid file. Check file type, size, and contents on the server.

Hiding the input without an accessible replacement

input[type="file"] {
  display: none;
}

This can make the control inaccessible if there is no correctly associated label or alternative control. Use a <label for="input-id"> and a visually-hidden pattern instead.

Forgetting focus styles

Hover styles help mouse users but not keyboard users. Include :focus-visible styling for the native selector button or for your custom label-based trigger.

Assuming file names are safe HTML

File names come from users. If you show them in the page, use textContent, not innerHTML.

status.textContent = file.name;

A native file input is usually the best starting point. Use ::file-selector-button first; choose the label pattern when the design requires a different layout or richer upload UI.

<input type="file" />

/* Style the built-in file-picker button */
input[type="file"]::file-selector-button {
  border: 0;
  padding: 0.6rem 1rem;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}

/* Optional legacy WebKit fallback */
input[type="file"]::-webkit-file-upload-button {
  border: 0;
}

<!-- Restrict suggested file types; still validate on the server -->
<input type="file" accept="image/png,image/jpeg" />

<!-- Allow more than one file -->
<input type="file" multiple />

<!-- Accessible custom trigger -->
<input class="visually-hidden" id="file" type="file" />
<label for="file">Choose file</label>

• Use ::file-selector-button to style the built-in button.
• Use :hover and :focus-visible for interaction feedback.
• Read selected files from input.files after the change event.
• input.files[0] is the first selected file.
• A script cannot preselect a user's local file.
• accept is a hint, not security validation.
• Upload files with FormData and validate them on the server.

Can CSS fully style an <input type="file">?

Not consistently across all browsers. ::file-selector-button styles the built-in button, but the remaining native UI has limits. Use a label associated with a visually-hidden input for full layout control.

What is ::file-selector-button?

It is a CSS pseudo-element that targets the file-selection button inside <input type="file">.

Can I change “Choose File” text with CSS?

Not reliably on the native button. Use a custom <label> trigger if you need custom button text.

How do I show the selected file name?

Listen for the input's change event and read input.files[0].name.

Is it okay to hide a file input?

Yes, when it has an accessible replacement, usually a <label for="...">. Avoid hiding it without a way for keyboard and assistive-technology users to activate it.

Does accept="image/*" prevent invalid uploads?

No. It mainly filters choices in the file picker. The server must validate every uploaded file.

Can JavaScript choose a file automatically?

No. Browsers block this to protect the user's local files. A user must explicitly choose the file.

How do I upload multiple files?

Add the multiple attribute, then loop through input.files.

• CSS pseudo-elements — ::file-selector-button is a pseudo-element used to style a specific part of a control.
• HTML labels and form controls — An associated label can activate a file input accessibly.
• Accessibility and keyboard focus — Custom upload controls must retain keyboard operation and visible focus feedback.
• DOM events — The change event tells JavaScript that the user selected or cleared files.
• File API — File, FileList, and input.files provide selected file metadata and content access.
• FormData — Used to submit files in multipart form requests.
• Client-side and server-side validation — Uploads require useful client feedback and secure server verification.