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.

[Author]

Posts