自定义input type=“file”样式

input type=“file”是一个网页上选择本地文件的按钮，但是由于不同浏览器的差异，这个按钮的样式也会不同。在实际开发当中，我们经常都需要用其他图片或者按钮来代替这个按钮。下面我们来看看怎样操作。

操作方法

  • 01

    编写基本的HTML代码，例如： <img id="upload_img" src="img/enroll/upload-btn.png" style="width: 254px;height: 246px;" /> <input id="file" type="file" class="mystyle" accept="image/*" />

  • 02

    编写input的CSS代码: .mystyle { width: 250px; height: 250px; position: relative; cursor: pointer; outline: medium none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; top: -80%; left: 10px; }

  • 03

    在浏览器上运行代码，根据实际情况来调整CSS中的长宽和上下左右距离等。实现原理，利用CSS中透明的属性，把input type=“file”隐藏了，然后把它放到您自定义的图片或按钮的位置上。

赞 (0)

相关推荐

  • Word2013怎么自定义SmartArt图形形状样式?

    在使用word时候,我们经常会用到其中的SmartArt来绘制流程图.关系图.列表等. 但是其中列出来的图形结构很多时候不能满足我们的要求,这时候我们就要求助旁边的"形状"来帮我们 ...

  • 如何自定义手机应用图标样式

    如何自定义手机应用图标样式

    手机是现在十分常用的工具之一,有些新用户不知道如何自定义手机应用图标样式,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开手机中的[主题]App,接着点击右下角[我的],然后 ...

  • PowerPoint2010怎么自定义插入图片的样式

    [1] 切换到【图片工具】下的【格式】选项卡，在【大小】选项组中单击【裁剪】，在弹出的下拉列表中选择【云形标注】。 [2] 这时候图片边框已经自行调整为云形标注的样式，但是对主体显示位置不太满意，我们 ...

  • PS中如何新建自定义的图案填充样式

    今天设计名片的时候想要带些艺术感的元素,就自定义设计了一个图案的填充效果,给大家分享一下. 操作方法 01 自定义填充的添加是需要先制作出来需要填充的素材,可以是图案,相片等等一切图形,然后在PS里边 ...

  • Excel如何自定义数据透视表样式

    Excel中有系统自带的84个"数据透视表样式",但如果你觉得这些数据透视表样式不够用.不够好看或者想做点小改动,可以自定义新的数据透视表样式,具体设置方法如下: 操作方法 01 ...

  • css如何修改上传文件按钮样式

    不同浏览器对type=file的样式显示不一样,而设计师给我们前端的只有一个上传按钮的效果图,怎么办呢.浏览默认的样式我们无法修改,怎么办呢?? 思路: 1.在type=file标签外面添加一个标签, ...

  • asp.net mvc动态生成file控件批量上传文件 .

    操作方法 01 如果lz只是批量上传, 不需要ajax上传的话, 可以直接在页面上加<input type=file />对象就可以了. 页面代码: <body>    < ...

  • curl 命令行下载工具使用方法小结

    获取curl curl 命令行下载工具 curl的官方网站为： http://curl.haxx.se 官方下载页面为：http://curl.haxx.se/download.html 你可能并不清 ...

  • js如何上传文件

    在软件开发或网站建站过程中,文件上传是必不可少的一项,不管是上传到服务器还是上传到本地,上传控件的包装如何,上传验证用js或jquery都是最简便实用的技术. 一起来学习,js上传文件以及验证文件格式 ...