<input type="file">

默认样式：

＜input type=“file“＞样式修改_html

如何用css将它修改好看一点呢？

<style>
    /* 后面的提示文字颜色 */
    [type="file"] {
      color: red;
    }
    /* 主按钮的样式自定义 */
    ::file-selector-button {
      height: 3rem;
      font-size: 1rem;
      color: #fff;
      border-radius: .25rem;
      border: 1px solid #2a80eb;
      padding: .75rem 1rem;
      background-color: #2a80eb;
      box-sizing: border-box;
      font-family: inherit;
      cursor: pointer;
    }
  </style>

＜input type=“file“＞样式修改_自定义_02

 

＜input type=“file“＞样式修改_文字颜色_03