Problem with custom styled file upload button in Contact Form 7

Hi,

I’m using Contact Form 7 and trying to style the file upload button with a fake custom button. I want the “BROWSE FILES” button to look nice while keeping the native file input hidden.

The form code:

<p class=”col-md-6″>
<label>Your name <span style=”color: #e74c3c;”>*</span></label>
[text* your-name]
</p>

<div class=”row”>
<p class=”col-md-6″>
<label>Email address <span style=”color: #e74c3c;”>*</span></label>
[email* email-address]
</p>
<p class=”col-md-6″>
<label>Phone number</label>
[tel phone-number]
</p>
</div>

<div class=”row”>
<p class=”col-md-6″>
<label>Purpose</label>
[text purpose placeholder “performance, display, photoshoots, etc.”]
</p>
<p class=”col-md-6″>
<label>Country</label>
[text country placeholder “for shipping estimates”]
</p>
</div>

<p>
<label>Describe your idea</label>
[textarea describe-your-idea rows:3 placeholder “any stylistic ideas, themes, or specific elements you’d like included”]
</p>

<div class=”row”>
<p class=”col-md-6″>
<label>Estimated budget</label>
[text estimated-budget placeholder “usually €400-€2000″]
</p>
<p class=”col-md-6″>
<label>Project deadline</label>
[date deadline]
</p>
</div>

<div class=”col-md-6 custom-file-upload”>
<label for=”attach-files”>Attach files</label>
<span class=”file-btn”>
<span class=”fake-btn”>BROWSE FILES</span>
[file attach-files id:attach-files limit:10mb accept:jpg|jpeg|png|pdf|doc|docx|txt|zip|rar]
</span>
<span class=”file-name”>No file selected</span>
</div>

<p class=”submit-center text-center”>
[submit class:btn-color-black “PLACE ORDER”]
</p>

And the upload button css styles:

/* Custom order button styling */

/* Wrapper: shrink to fit fake button */
.file-btn {
position: relative;
display: inline-block;
line-height: 0;
}

/* Visual fake button */
.file-btn .fake-btn {
display: inline-block;
padding: 20px 20px;
border-radius: 6px;
background: #fff;
color: #0a0216;
font-size: 14px;
cursor: pointer;
text-transform: uppercase;
font-weight: 600;
user-select: none;
}

/* Real file input */
.file-btn input[type=”file”] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
margin: 0;
padding: 0;
cursor: pointer;
}

/* Filename directly under button */
.file-name {
font-size: 15px;
color: #666;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}

The fake button displays correctly, but the clickable area of the hidden file input does not support the cursor: pointer style. This creates a strange effect: when I hover over the fake button, I can see the pointer cursor only in its area, but as soon as the cursor reaches the invisible real file input (which is sitting on top), the pointer reverts back to default.

As a result, half of the button shows a pointer cursor and half does not, even though it’s supposed to act like one single button.

Do you know how can I fix it so the entire visible fake button area consistently shows the pointer cursor? Thanks in advance!!

Attachments:

You must be logged in to view attached files.

Hello,

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand if it is our theme issue or not?

Best Regards,

Hello!

I’ve had the exact same problem while using other paid and free WordPress themes, including Newspaper, Twenty Twenty, and others. I’m wondering if anyone else has experienced the same issue and could give me a hand fixing my current button state. If there’s nothing you can do or you can’t suggest the right approach, I’ll still be thankful for your response.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

Private Info:

Hello,

The issue is that your real <input type="file"> is sitting on top of the fake button, so the cursor switches back to default when you hover over its area.

Browsers don’t allow styling the file input’s cursor consistently, so the fix is to make the input “invisible but behind,” and use the <label> click behavior to trigger it.

Please open this file and use this code and check how it works:
https://codefile.io/f/N8uZpiOF9m

Best Regards,

The code worked perfectly, but the margin between the input fields has instantly risen. Another issue is the label, that is situated above the “browse files” button, which is located higher than it should be. Could you give me a piece of advice on how to fix those two problems, thanks in advance.

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wpcf7 p {
    margin-bottom: 0px;
}
.custom-file-upload {
    margin-top: 10px;       /* remove unwanted top gap */
}
.custom-file-upload label.file-btn {
    display: inline-flex;
    align-items: center;      /* vertical center */
    gap: 10px;
}
.custom-file-upload .file-name {
    margin-left: 10px;
}

Best Regards,

Worked correctly, thanks!

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts