如何修改WordPress Contact Form7插件文件上传框的“No File Chosen”文本及位置

步骤1：更新CSS样式 #

在你已有的CSS代码基础上，补充以下规则，隐藏原生提示文本并替换为自定义的法语内容，同时调整布局位置：

/* 隐藏原生的"No File Chosen"文本，设置相对定位用于自定义文本定位 */
.wpcf7-file {
  color: transparent;
  position: relative;
  width: auto;
}

/* 添加自定义默认提示文本（法语），调整位置与按钮错开 */
.wpcf7-file::before {
  content: 'Aucun fichier choisi';
  color: #666;
  position: absolute;
  left: 120px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

/* 文件选中后隐藏自定义默认文本 */
.wpcf7-file:has(:not([value=""]))::before {
  display: none;
}

/* 保留你原有的自定义按钮样式 */
.wpcf7-file::-webkit-file-upload-button {
  visibility: hidden;
}
.wpcf7-file::after {
  content: 'Choisir un fichier';
  color: #FFF;
  display: inline-block;
  background: #286889;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
  margin-top: 7px;
}
.wpcf7-file:active {
  outline: 0;
}
.wpcf7-file:active::after {
  background-color: #ff9800; 
}

步骤2：添加JavaScript（可选，用于显示选中的文件名） #

如果需要显示用户选中的文件名，可添加以下JS代码监听文件输入变化：

document.addEventListener('DOMContentLoaded', function() {
  const fileInputs = document.querySelectorAll('.wpcf7-file');
  fileInputs.forEach(input => {
    // 创建用于显示文件名的元素
    const fileNameSpan = document.createElement('span');
    fileNameSpan.className = 'custom-file-name';
    fileNameSpan.style.cssText = 'margin-left: 10px; color: #333; font-size: 16px;';
    input.parentNode.insertBefore(fileNameSpan, input.nextSibling);

    // 监听文件选择事件，更新文件名显示
    input.addEventListener('change', function() {
      fileNameSpan.textContent = this.files.length > 0 ? this.files[0].name : '';
    });
  });
});

说明 #

• CSS中的:has选择器需现代浏览器支持，若要兼容旧版浏览器，可通过JS逻辑控制默认文本的显示/隐藏。
• 可调整::before伪元素的left值，自定义提示文本的位置，使其与按钮布局更协调。

内容的提问来源于stack exchange，提问作者Alexandre Deplancke