Change text of "choose file" buttons in contact form 7 (WordPress)

Question

The file upload field is controlled by the browser so that one should automatically be translated based on the browsers settings. I need set my language on this button. How I can do that?

Answer 1

I've found solution on sitepoint. Just below .file-resume on your file input name and then modify your button.

/* Style wrapping span as button */
span.wpcf7-form-control-wrap.file-resume {//FILE-REsume == your name of file input
    display: inline-block;
    position: relative;
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #11b28e;
    background: gray;     
    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: "прикріпити файл";
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #FFF;
    font-size: 16px;
}

Answer 2

To change the text 'Select File' on the button I use the code below. And it works fine for me.

However, I can't change the text "No file chosen" next to the button. Can anyone tell me something about this topic?

 .wpcf7-file::-webkit-file-upload-button {
      visibility: hidden;
    }
    .wpcf7-file::before {
      content: 'Select File NEW';
      display: inline-block;
        background: #00a0dd !important;
    
      padding: 15px 15px;
      outline: none;
      white-space: nowrap;
      -webkit-user-select: none;
      cursor: pointer;
      font-weight: 700;
      font-size: 10pt;
        color:#FFF
    }
    .wpcf7-file:hover::before {
      border-color: black;
    }
    .wpcf7-file:active::before {
      background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
    }