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

小仙女de成长

已于 2023-03-27 17:16:11 修改

阅读量163

点赞数

文章标签： html 前端

于 2023-03-27 14:23:03 首次发布

博客就当自己记的笔记而已~非常感谢博客大神的帮助，若有无意侵权，请联系我，谢谢

本文链接：https://blog.csdn.net/qq_32963841/article/details/129794627

版权

<input type="file">

默认样式：

如何用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>