如何用纯CSS样式HTML文件实现上传按钮

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

来源 : How to Style a HTML file upload button in Pure CSS

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,596评论 2 45
  • 熟悉我了解我的人都知道我不爱打字,我爱写字,可能是喜欢笔尖殷实的落在纸上的感觉,也可能是喜欢许久以后翻开泛黄的纸张...
    Moon小姐阅读 180评论 0 0
  • 不幸的是,被动的学习有严重的缺点。它让我们越来越倾向不加鉴别地去吸收那些甚至我们自己也说过与传闻和谣传没有差别...
    Dawn_乾琳阅读 242评论 0 1
  • 产品、服务、体验或生活方式仅仅有实用价值是远远不够的,只有那些外表美观、新颖独特又有情感内涵的产品,才能在带来经济...
    榛果Latte阅读 146评论 0 1
  • 图片发自简书App 一大学朋友和我抱怨,恼怒不止,说终于体会到了人情冷暖,问其原因,才知道又是室友之间的是非。有一...
    浅之尤者阅读 5,182评论 0 1