hi,欢迎访问本站!
当前位置: 首页Web前端正文

CSS美化文件上传按钮的方法

墨初 Web前端 537阅读

HTML中默认的文件上传按钮太丑了,就想了一些方法去美化它,下面博文中就介绍了一种使用CSS去美化文件上传按钮的方法。

CSS 美化input上传按钮样式的方法

美化实现逻辑:

1、用 div 元素或 span 标签设计一个上传的按钮,这个按钮怎么设计都可以

2、把 input 上传按钮绝对定位到这个美化的按钮上位,并将其透明度设置为 0 即可!

示例代码:

<style>
.filediv{
    position: relative;
}
.filediv input{
    opacity: 0;
    width: 100px;
    height: 35px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}
.filediv div{
    height: 35px;
    line-height: 35px;
    background-color: #03a9f4;
    color: #fff;
    width: 100px;
    text-align: center;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 98;
}
</style>
<!-- http://73so.com -->
<form name="form1" id="form1">
    <div class="filediv">
        <input type="file" id="btn_file" name="file"></input>
        <div>上传文件</div>
    </div>
</form>
标签:
声明:无特别说明,转载请标明本文来源!
相关推荐