纯css编写的input file文件上传按钮美化

使用方法

:root {
  --primary-color: #0964b0;
}

.cd__main {
  background: #1f3244 !important;
  min-height: 100vh;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmax;
  box-sizing: border-box;
}

.custom-uploader {
  background-color: #efefef;
  padding: 32px;
  border-radius: 20px;
}

input[type=file] {
  padding: 4px;
  margin: -4px;
  position: relative;
  outline: none;
  /* File Selector Button Styles */
  /* Faked label styles and icon */
  /* Handle Component Focus */
}
input[type=file]::file-selector-button {
  border-radius: 4px;
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  /*
    This is a hack to change the button label. 
    I'm hiding the default label and then 
    manually applying the width based on 
    updated icon and label.
  */
  width: 132px;
  color: transparent;
  /*
    Firefox doesn't support the pseudo ::before 
    or ::after elements on this input field so 
    we need to use the @supports rule to enable 
    default styles fallback for Firefox.
  */
}
@supports (-moz-appearance: none) {
  input[type=file]::file-selector-button {
    color: var(--primary-color);
  }
}
input[type=file]::file-selector-button:hover {
  background-color: #f3f4f6;
}
input[type=file]::file-selector-button:active {
  background-color: #e5e7eb;
}
input[type=file]::before {
  position: absolute;
  pointer-events: none;
  top: 14px;
  left: 16px;
  height: 20px;
  width: 20px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
}
input[type=file]::after {
  position: absolute;
  pointer-events: none;
  top: 16px;
  left: 40px;
  color: var(--primary-color);
  content: "上传文件";
}
input[type=file]:focus-within::file-selector-button, input[type=file]:focus::file-selector-button {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}