实现 CSS 表单文件输入

在 CSS 中，我们可以使用 input[type="file"] 选择器来定制文件输入表单元素的样式。通过样式化文件输入表单，我们可以改变其外观，使其更加符合我们的设计需求。

以下是一个示例，演示如何实现 CSS 表单文件输入：

/* HTML */
<input type="file" id="file-input" name="file" class="custom-file-input">

/* CSS */
.custom-file-input {
  /* 隐藏默认的文件选择按钮 */
  display: none;
}

.custom-file-input::before {
  content: '选择文件'; /* 设置按钮文本 */
  display: inline-block;
  padding: 10px 20px; /* 按钮的内边距 */
  background-color: #007bff; /* 按钮的背景色 */
  color: #fff; /* 按钮的文字颜色 */
  border-radius: 4px; /* 按钮的圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
}

.custom-file-input:hover::before {
  background-color: #0056b3; /* 鼠标悬停时按钮的背景色 */
}

.custom-file-input:active::before {
  background-color: #003d80; /* 按钮按下时的背景色 */
}

在上述示例中，我们首先使用 display: none; 隐藏了默认的文件选择按钮。然后通过 ::before 伪元素为文件输入表单添加了一个可点击的按钮。

通过设置 content 属性，我们添加了按钮的文本内容。然后定义了按钮的样式，如内边距、背景色、文字颜色、圆角和鼠标样式。

通过调整按钮的背景色使其在鼠标悬停和按下时具有不同的外观效果。

使用上述 CSS 代码可以实现自定义的文件输入表单样式。

希望对你有所帮助！