Customizing Send File Contact Form 7 wordpress button

Question

I have a form in contact form 7, wordpress, I need to change the button attach aquivos, today it is like this:

I need the buttons to stay like this:

I’ve tried everything and nothing!! If anyone needs to access the test page is this here!

Answer 1

Based on Darlei’s help, I did it! Follow the solution:

 .styled-select #sexo{

        background: url(icone-seta-premio.png) no-repeat;
        height: 45px;
        position: relative;
        z-index: 999;
        background-position: center center;
        background-position-x: 110px;
        background-color: #f7f7f7;
        border: 1px solid #eee;
        width: 100%;
        font-size: 16px;
        height: 37px;

    }

    .styled-select {
        height: 45px;


    }

Thanks for your attention and help!!!

Answer 2

You can solve this problem in two steps.

1. Create the CSS of inputs A simple technique that uses HTML and CSS is to point out the attribute for of a label to the input file selection (which will be hidden). When the user clicks on label, will be like clicking on input file. An example:

   input[type='file'] {
       display: none
   }
   
   label {
       background-color: #fdd31d;
       color: #000;
       cursor: pointer;
       margin: 10px;
       padding: 6px 20px;
       display: table;
   }
   
   <label for='anexo-1'>Anexo 1</label>
   <input id='anexo-1' type='file'>
   <label for='anexo-2'>Anexo 2</label>
   <input id='anexo-2' type='file'>
   <label for='anexo-3'>Anexo 3</label>
   <input id='anexo-3' type='file'>    
   

https://jsfiddle.net/Darlei_Zillmer/65s18g4v/

2. Assign ids and classes in the Contact Form 7:

   <label for='anexo1'>Anexo 1</label>
   [file file-1 id:anexo1]
   <label for='anexo2'>Anexo 2</label>
   [file file-2 id:anexo2]
   <label for='anexo3'>Anexo 3</label>
   [file file-3 id:anexo3]