Hide “No file chosen” text for File Upload Field

Hi @maryando,

The file input styles are totally controlled by the web browser you use, even the text that is displayed when a file is not selected yet (that is translated based on the user language).

However, it’s certainly possible to customize this field, although it needs some work. See this article to learn more: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

Thanks so much all works perfectly!

• This reply was modified 2 years, 5 months ago by maryando.

Hello,
I arrived to hide input button but can’t display file name choosen,
My CSS code work well

span.wpcf7-form-control-wrap.file-611{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #4096ee;
    background: #0C2A4E;
    color: #FFF;
    overflow:hidden;
	cursor : pointer
}

.wpcf7-form-control-wrap.file-611 input {
    position: absolute;
    width: 1500px;
    height: 1000px;
    right: 0;
    bottom: 0;        
    outline: none !important;
	  cursor: pointer;
} 

.wpcf7-form-control-wrap.file-611::before {
content: 'Nous transmettre votre cahier des charges';
display: inline-block;
font-size: 14px !important;
position:absolute;
left:5%;
top:17%;
}

.wpcf7-form-control-wrap.file-611::after {
content:url(https://www.radper.com/wp-content/uploads/2022/09/upload-24.png);
position:absolute;
top:17%;
right:2%;
cursor: pointer;
}

My javascript code (I’m trying just to display a pop up but it’s not working !)

const input_file = document.querySelector('span.wpcf7-form-control-wrap.file-611');
input_file.addEventListener('click', function(){
alert("I am an alert box!");
console.log("hello");
})