随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

原生input file选择文件样式美化成按钮

外加一个a标签,内部的inout直接设置input透明度0,这样input也能点击;

如图为两种情况不同写法的效果截图

 

 

<a href="javascript:;" class="file">自定义上传
    <input type="file" name="" id="">
</a>
复制代码
样式:
<style> .file { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; cursor: pointer; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; } </style>
复制代码

 

posted on   小虾米吖~  阅读(270)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2016-03-31 Struts 路径分析以及是否一定要执行excute()方法
2016-03-31 学习Struts2经验总结

点击右上角即可分享
微信分享提示