基础 CSS 表单文件上传按钮

在网站和应用程序的开发中，用户上传文件是一个常见的场景。通常，我们需要在表单中添加一个文件上传按钮，以便让用户选择要上传的文件。

本文将介绍如何使用基础 CSS 样式创建一个简单但漂亮的表单文件上传按钮，让你的网站或应用程序看起来更加专业和现代。

HTML 代码

首先，让我们来看看一段基本的 HTML 代码，它创建了一个表单元素和一个文件上传按钮。

<form>
  <input type="file" id="file-upload">
  <label for="file-upload" class="custom-file-upload">
    Choose File
  </label>
</form>

这段代码中，我们创建了一个表单元素，并在其中添加了一个文件上传控件（input[type="file"]）和一个标签元素（label）。标签元素被设置为自定义类名"custom-file-upload"，以便我们可以为它添加自定义样式。此外，标签元素的for属性与文件上传控件的id属性相匹配。

CSS 样式

接下来，让我们为这个表单文件上传按钮添加一些 CSS 样式，以使它看起来更漂亮。

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #f2f2f2;
  color: #888;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.custom-file-upload:hover {
  border: 1px solid #999;
  background-color: #e6e6e6;
  color: #666;
}

.custom-file-upload:active {
  background-color: #ddd;
}

这段 CSS 样式包括一些常见的属性，用于设置文件上传按钮的外观和交互。以下是样式的详细说明：

• border: 设置按钮的边框样式。
• display: 设置按钮为行内块元素，以便在一行内显示。
• padding: 设置按钮的内边距。
• cursor: 当鼠标悬停在按钮上时，显示光标。
• font-weight: 让文本看起来更加粗体。
• margin-bottom: 为按钮添加一点下边距。
• text-align: 居中文本。
• white-space: 设置文本不换行。
• vertical-align: 垂直对齐。
• background-color: 设置按钮的背景颜色。
• color: 设置按钮上文本的颜色。
• border-radius: 设置按钮的圆角半径。
• -webkit-user-select: 设置禁止选中文本。
• -moz-user-select: 设置禁止选中文本。
• -ms-user-select: 设置禁止选中文本。
• user-select: 设置禁止选中文本。

此外，我们为按钮添加了 :hover 和 :active 伪类，使它在鼠标悬停和按下时完美交互。

结论

现在，你已经知道如何创建一个基础 CSS 表单文件上传按钮了。你可以将这个文件上传按钮的样式应用到你的项目中，使你的网站或应用程序看起来更加专业和现代。