自定义文件选择按钮 CSS 代码实现

要实现一个自定义的文件选择样式，你可以使用 CSS 和一些 JavaScript 来模拟文件选择按钮的外观和行为。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>自定义文件选择按钮</title>
  <style>
    #file-upload {
      display: none;
    }
    
    .custom-file-upload {
      display: inline-block;
      padding: 8px 12px;
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
    }
  </style>
  <script>
    function handleFileSelect() {
      var fileInput = document.getElementById('file-upload');
      fileInput.click();
    }
    
    function showSelectedFileName() {
      var fileInput = document.getElementById('file-upload');
      var fileNameDisplay = document.getElementById('file-name-display');
      
      if (fileInput.files.length > 0) {
        fileNameDisplay.innerText = fileInput.files[0].name;
      } else {
        fileNameDisplay.innerText = '未选择文件';
      }
    }
  </script>
</head>
<body>
  <h1>自定义文件选择按钮</h1>
  
  <input type='file' id='file-upload' style='display: none;' onchange='showSelectedFileName()'>
  <label for='file-upload' class='custom-file-upload' onclick='handleFileSelect()'>选择文件</label>
  
  <div id='file-name-display'>未选择文件</div>
</body>
</html>

上述代码使用了一个隐藏的文件输入字段input type='file'，以及一个自定义的文件选择按钮label。通过 CSS 样式，将真实的文件选择按钮隐藏起来，并将自定义按钮与它关联。通过 JavaScript 中的两个函数，handleFileSelect() 和 showSelectedFileName() 来实现按钮的点击和文件名的显示。

你可以将上述代码保存为一个 HTML 文件（例如：file_upload.html），然后在浏览器中打开该文件，即可看到自定义的文件选择按钮。当你选择文件后，文件名将显示在页面上方。你可以根据自己的需要对 CSS 样式进行自定义，并根据实际情况添加更多的交互和功能。