How to style choose file button in contact form7?

CMS & WordPress
1

How can i style choose a file button to different style.

Here is the link : http://weboway.com/pooja/page2-2-2-3/

i want to style choose file button to different background color and different text color also.
Or if i want to have a background images then how can i change it.

I have search over google and try to find out the solution but didn’t able to solve this issues.

Please help me to find the best solution.

2

Try this:

/* Style wrapping span as button */
span.wpcf7-form-control-wrap.DropFileHere {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #4096ee;
    background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);        
    color: #FFF;
    overflow:hidden;
}

/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
.input.wpcf7-form-control.wpcf7-file {
    position: absolute;
    width: 1500px;
    height: 1000px;
    right: 0;
    bottom: 0;        
    outline: none !important;
}

/* Add button text */
.wpcf7-file:before {
    content: "Click me";
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #FFF;
    font-size: 16px;
}

This is how result looks with these styles:

3

Check the URL again

I have apply ur code

How can i remove the choose file button that is appearing on a button.

4

My code had a typo, remove first dot here:

.input.wpcf7-form-control.wpcf7-file {
^
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.