图标实现文件的上传下载

最新推荐文章于 2022-03-29 22:38:26 发布

羊咩咩和喵呜

最新推荐文章于 2022-03-29 22:38:26 发布

阅读量440

点赞数

分类专栏： Vue框架 CSS 文章标签：图标使用文件上传按钮隐藏 Vue

本文链接：https://blog.csdn.net/qq_42853707/article/details/101384754

版权

CSS 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

Vue框架

3 篇文章 0 订阅

订阅专栏

今天由于项目的bug再改,我写一篇博客纪念解决的小图标bug,不废话了,上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css"/>
    <script src="lib/vue-2.4.0.js"></script>
    /* Vue引入*/
    <title>图标案例</title>
    <style>
        /*设置公共样式*/
        .icon {
            list-style: none;
            font-family: "icomoon";
            font-weight: normal;
            font-style: normal;
            color: #000000;
            font-size: 18px;
        }
/*第一种方法*/
        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }
        .fileinput-button input {
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
        }

    </style>
</head>
<body>
<div>
    <!--第一种方法-->
    <span class="fileinput-button ">
   <i class="icon icon-upload" aria-hidden="true"></i>
   <input type="file" multiple>
 </span>
    <!--需要css配合-->
    <!--利用定位和透明度-->

</div>
<div>
    <!--第二种-->
    <label for="fileInput">
        <i class="icon icon-upload" aria-hidden="true"></i>
    </label>
    <input v-show="false" type="file" id="fileInput" style=" opacity: 0;">
    <!--Vue方法-->
    <!--用label,之后改变input的透明度,因为透明之后会占用空间,所以加一个父级标签,设置宽度,超过之后在隐藏-->

</div>
<div>
    <label for="fileInput">
        <i class="icon icon-upload" aria-hidden="true"></i>
    </label>
    <input v-show="false" type="file" id="fileInput">
<!--第三种Vue方法-->
</div>


</body>
</html>

羊咩咩和喵呜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图标实现文件的上传下载

今天由于项目的bug再改,我写一篇博客纪念解决的小图标bug,不废话了,上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scal...
复制链接

扫一扫

专栏目录