css美化input file按钮的代码方法

下面是详细讲解“css美化input file按钮的代码方法”的完整攻略。

简介

<input type="file"> 元素在HTML中用于上传文件，长相不甚美观。但是，我们可以通过CSS来美化它。

步骤

1. 隐藏原来的文件上传按钮
2. 创建一个用来代替原来的按钮的新元素
3. 将新元素与原来的文件上传按钮进行关联

下面是示例代码：

例1：自定义上传按钮背景颜色和字体颜色

<div class="upload-btn">
  <label for="file-upload">上传文件</label>
  <input id="file-upload" type="file">
</div>

/* 隐藏原来的上传按钮 */
#file-upload {
  display: none;
}

/* 美化新按钮的外观 */
.upload-btn {
  display: inline-block;
  background-color: #00b7ee;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

/* 将新按钮与原来的上传按钮关联 */
#file-upload + label {
  margin-left: 10px;
}

.upload-btn label {
  cursor: pointer;
}

/* 按钮悬停效果 */
.upload-btn:hover {
  background-color: #0095c4;
}

例2：自定义上传按钮图标和颜色

<div class="upload-btn">
  <label for="file-upload"><i class="fas fa-file-upload"></i>上传文件</label>
  <input id="file-upload" type="file">
</div>

/* 隐藏原来的上传按钮 */
#file-upload {
  display: none;
}

/* 美化新按钮的外观 */
.upload-btn {
  display: inline-block;
  background-color: #f1494c;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.upload-btn i {
  margin-right: 5px;
}

/* 将新按钮与原来的上传按钮关联 */
#file-upload + label {
  margin-left: 10px;
}

.upload-btn label {
  cursor: pointer;
}

/* 按钮悬停效果 */
.upload-btn:hover,
.upload-btn:focus {
  background-color: #d12e33;
}

以上便是美化 <input type="file"> 按钮的两个示例。需要注意的是，美化文件上传按钮的方法具体来说，确实很多。本处只涉及较为基础的美化方式，如果需要更加复杂的样式，请自行查找相关资源。