【CSS】自定义上传文件按钮

最新推荐文章于 2024-01-18 17:33:42 发布

邹大叔

最新推荐文章于 2024-01-18 17:33:42 发布

阅读量863

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

这里写图片描述

【CSS】自定义上传文件按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="common.css"/>
        <style>
            .sc{
                width: 200px;
                height: 73px;
                line-height: 73px;
                text-align: center;
                /*background: url(img/file_btn_03.png) no-repeat center;
                background-size: contain;*/
                background: deeppink;
                border-radius: 50px;
                -moz-border-radius: 50px;
                -webkit-border-radius: 50px;
                position: relative;
            }
            .mystyle{
                width: 200px;
                height: 73px;
                position:absolute;
                cursor: pointer;
                outline: medium none;
                filter:alpha(opacity=0);
                -moz-opacity: 0;
                opacity: 0;
                top:0px;
                left: 0;
                z-index: 9999;

            }
        </style>
    </head>
    <body>
        <!--自定义上传图片按钮-->
        <!--利用CSS中透明的属性，把input type=“file”隐藏了，然后把它放到您自定义的图片或按钮的位置上。-->
        <div class="sc">上传图片
            <input type="file" name="file" id="file" class="mystyle" value="" accept=""/>
        </div>
    </body>
</html>
<script type="text/javascript">

</script>

邹大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】自定义上传文件按钮

【CSS】自定义上传文件按钮<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="common.css"/> <style> .sc
复制链接

扫一扫

专栏目录