input上传文件的样式修改

最新推荐文章于 2023-12-01 19:08:19 发布

love-study-lele

最新推荐文章于 2023-12-01 19:08:19 发布

阅读量2.8k

点赞数

分类专栏： css 文章标签： input文件的样式修改

本文链接：https://blog.csdn.net/qq_40639990/article/details/78308581

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .upload {
        display: inline-block;
        width: 120px;
        height: 60px;
        line-height: 60px;
        background: #009ad6;
        position: relative;
        text-align: center;
      }
      /*input 标签有默认的宽高border,outline*/
      .upload> input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*透明度为0*/
        opacity: 0;
        cursor: pointer;
      }

    </style>
  </head>
  <body>

    <div class="upload">
      上传文件
      <input type="file">
    </div>

  </body>
</html>

love-study-lele

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
input上传文件的样式修改

* { margin: 0; padding: 0; } .upload { display: inline-block; width: 120px; height: 60px; line-height: 60px; background: #009ad6;
复制链接

扫一扫