How to Style JetFormBuilder File Upload Fields for a Modern Look

How the CSS works

1. Brand variables. All colors and the box size live in four custom properties on the Media Field wrapper that contains your bmc-upload input. Change #2145E6 (blue) and #F6FAFF (light background) to your brand colors, and every rule follows.
2. Scoped flex layout. :has(.bmc-upload) makes only the Media Field wrapper that contains your input a flex row, so other fields keep their normal layout. gap handles the spacing between the box and the previews.
3. Fixed upload column. __fields stays exactly one box wide and never shrinks. __content takes the rest of the row.
4. Message stays visible. A common version of this CSS uses display: none on __message to remove "No file chosen". That doesn't work. The browser draws "No file chosen" inside the native file input, not in that element. Hiding __message can also hide information users need, such as the maximum file size text. The snippet moves it to its own line under the box instead.
5. Browser text hidden. color: transparent and font-size: 0 on the input hide the "No file chosen" or file name text. The width limit stops it from overflowing the column. The button gets its own font-size back so its label stays readable.
6. The upload box. ::file-selector-button styles the browser's button as a square with a dashed border and rounded corners. Button content is centered by default, so no extra alignment rules are needed.
7. Hover and focus. The box changes on hover and shows an outline when someone reaches it with the Tab key, so it isn't mouse-only.
8. Previews. Thumbnails get rounded corners and wrap onto new lines when there are several.
9. Mobile. Below 480px wide, the previews stack under the box.

What you should see

Reload the form, clearing any page cache first. The upload field should be a square box with a dashed border showing the browser's own label: "Choose File" in Chrome and Safari, "Browse…" in Firefox. There should be no "No file chosen" text. After you pick an image, its preview appears to the right with rounded corners. Any size or notice text appears below.

To test it fully:

• Upload one file, then several.
• Press Tab until the box has focus and check for the outline.
• Narrow the browser window to check the stacked layout.
• Repeat the checks in Chrome, Firefox and Safari.

Multiple files and thumbnail sizes

When MAXIMUM ALLOWED FILES TO UPLOAD (Field tab) is above 1, the preview list grows with each file. JetFormBuilder's own styles already wrap the previews onto new lines and show each one as a 100 × 100 px tile with object-fit: cover. To change the tile size, override it:

.jet-form-builder-file-upload:has(.bmc-upload) .jet-form-builder-file-upload__file {
  width: 80px;
  height: 80px;
}

.jet-form-builder-file-upload:has(.bmc-upload) .jet-form-builder-file-upload__file img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Non-image files such as PDFs show a file name instead of a thumbnail, so test with those too. While you're in the block settings, review the related options:

• MAXIMUM SIZE IN MB (if empty, your server's maximum upload size is used) and ALLOW MIME TYPES (empty means all types).
• FILES LIMIT EXCEEDED and FILE SIZE LIMIT EXCEEDED under Validation > Advanced. Write clear messages so users know what went wrong.

Changing the "Choose file" text

CSS can't change the browser's button label. To show your own text, use the pattern from Crocoblock's snippet: hide the native input, add your own button, and have that button open the file picker. Here is a plain JavaScript version without a jQuery dependency:

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.jet-form-builder-file-upload__input.bmc-upload').forEach(function (input) {
    var button = document.createElement('button');
    button.type = 'button';
    button.className = 'bmc-upload-button';
    button.textContent = 'Upload photos';
    input.style.display = 'none';
    input.insertAdjacentElement('afterend', button);
    button.addEventListener('click', function () {
      input.click();
    });
  });
});

Add it as a footer script with a code snippets plugin, or enqueue it from your child theme. Keep these points in mind:

• Once the input is hidden, the ::file-selector-button rules no longer show. Move those styles to .jet-form-builder-file-upload__fields .bmc-upload-button.
• Forms that load later, such as in a popup, need the script to run after they appear.
• If the field is required, submit the form empty and confirm the error message still shows.

For a fuller walkthrough, see our JetForm Builder media upload button customization tip.

Want real drag-and-drop?

The dashed border only makes the field look like a drop zone. The core Media Field is a button that opens the file picker. For real drag-and-drop, use the separate Drag & Drop File Upload Add-on. It has its own ALLOWED MIME TYPES and CSS CLASS NAME settings. Our guide to JetFormBuilder drag and drop file upload covers it. If you also want upload progress, see the redesigned Media Field with progress bar and compression.

Common problems

• The CSS doesn't apply. Clear page, CSS and CDN caches, and turn off CSS minification while you test. Then check in DevTools whether bmc-upload is on the element the snippet expects (see Step 1). If Style Manager output wins, raise specificity with your class instead of adding !important.
• Every form field changed layout. An unscoped .jet-form-builder__field-wrap { display: flex; } rule is still active somewhere. Remove it.
• The max file size message disappeared. Look for a leftover .jet-form-builder-file-upload__message { display: none; } rule and delete it.
• It works in one browser but not another. ::file-selector-button is supported in current Chrome, Firefox and Safari. Very old browsers only knew the prefixed ::-webkit-file-upload-button. Update the browser you test with before you debug further.
• The Media Field sits inside a Repeater. Check in DevTools that the custom class and the BEM classes still wrap the field there. Adjust the selector if the structure differs.
• The button still says "Choose File". That's expected with CSS alone. Use the JavaScript pattern above.

Keep the Media Field updated

Styling is cosmetic. Updates are not. Several Media Field security fixes shipped recently, per the JetFormBuilder changelog:

• 3.6.3 made USER ACCESS a required setting.
• 3.6.5.2 escaped Media Field previews to prevent XSS.
• 3.6.6 fixed unauthenticated deletion of Media Library attachments.
• 3.6.6.1 fixed a Media Field access check.

Run the latest version. Set USER ACCESS to the narrowest option that works, and pick "Any user (incl. Guest)" only if anonymous visitors truly need to upload. Uploaded files are stored in wp-content/uploads/jet-form-builder.

With a custom class, the scoped snippet and the browser text hidden, your Media Field becomes a clean upload box that matches your branding without touching other fields. If you'd rather have someone build or extend it for you, post a request on BoostMyCroco.