定制化上传按钮是如何实现的

CSS代码

.btn{
    box-sizing: border-box;
    padding: 5px 15px;
    width: 100px;
    height: 30px;
    background: #0271DA;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}
.box{
    position: relative;
    width: 100px;
    height: 30px;
    overflow: hidden;
}
.file{
    position: absolute;
    top: 0;
    left: -100px;
    width: 300px;
    height: 30px;
    opacity: 0;
    cursor: pointer;
    z-index: 100;
}

HTML代码

<div class="box">
    <a class="btn">上传头像</a>
    <input type="file" class="file" name="" id="" value="" />
</div>

如果明白了,请赞赏,1分也是爱。
如果还是不理解,看来需要视频讲解以及面对面一对一讲解了(视频+源码 5元)
联系方式QQ:1718202383
可接应届毕业生论文项目
可接外包项目


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 最近比较忙,都快忘了更新,不好意思了。 今天,我给大家讲一个关于民间鬼怪的故事。 我家虽然处在浙江,算是平原,但离...
    一点钥匙阅读 2,563评论 0 0
  • 我的弟弟出生不久后我便放暑假。放假后我想着我在家可以好好看看弟弟了,于是我开开心心的回到了家。 到家了我不...
    任嘟嘟嘟阅读 1,306评论 0 0
  • 前些年热播过一部电视剧《康熙王朝》,主题曲里有一句歌词,“我真的好想再活五百年”,不少人认为这歌词写的大气磅...
    王贵成阅读 3,957评论 0 1

友情链接更多精彩内容