css怎么把file标签搞得透明

input[type="file"] {
  opacity: 0; /* 设置透明度为0，完全透明 */
  width: 100px; /* 根据需要设置宽度 */
  height: 40px; /* 根据需要设置高度 */
}

input[type="file"] {
  visibility: hidden; /* 隐藏元素，但保留其空间 */
}

input[type="file"] {
  position: absolute;
  z-index: -1; /* 将文件输入框放置在底层 */
}

input[type="file"] {
  position: relative;
}

input[type="file"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* 背景透明 */
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent File Input</title>
<style>
  .custom-file-input {
    position: relative;
    width: 100px;
    height: 40px;
  }

  .custom-file-input input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 100%;
  }

  .custom-file-input::before {
    content: '选择文件';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 40px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="custom-file-input">
  <input type="file">
</div>

</body>
</html>