input file 美化

        <input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化。找了很多资料,目前发现以下方式是最简单的美化方式。

1.将file input用label包裹起来,然后给这个label增加我们想要的样式。

2.给input增加样式:

style="left:-9999px;position:absolute;"

3.label内增加显示文本

<span>上传文件</span>

完整代码:(点击查看demo)

<label class="upload_btn" for="file">
    <input type="file" id="file" name="" style="left:-9999px;position:absolute;">
    <span>上传文件</span>
</label>

       这是label标签特性,可将事件传递到目标标签,如不加for属性,默认传递到第一个标签。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

ABAP Netweaver和git的快捷方式

我笔记本上有很多github仓库,每次切换仓库,我不想敲很长的cd命令。比如现在我需要手敲下面的命令进入一个Java仓库:

17850
来自专栏mySoul

浏览器推送 comet

服务器端的推送事件的方式为客户端在创建一个EventSource对象时会建立一个到服务器的连接,服务器会保持这个连接处于打开的状态,当发生一个事件的时候,服务器...

11930
来自专栏dotnet & java

win8 notepad++ 设置无法保存

前些天买了新笔记本。装的是win8 ,后来装了notepad++ ,最新版的,改了字体,下次从新打开之后,发现字体改动无效。后来试了一下“管理员身份运行”,再次...

13030
来自专栏Jerry的SAP技术分享

如何将iso文件安装到VirtualBox里的ubuntu去

我在Window的virtualbox里安装了一个ubuntu: 默认情况下IDE Secondary Master是空的。

40840
来自专栏草根专栏

使用VS Code开发asp.net core (上)

本文是基于Windows10的. 下载地址: https://code.visualstudio.com/ insider 版下载地址: https://cod...

36350
来自专栏知无涯

如何用PHP获取Bing背景图

411100
来自专栏JackeyGao的博客

使用SASS做个可自定义主题的网页

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sa...

34920
来自专栏PHP在线

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是客户端表单验证插件。 Query formValidator表单校验插件支持的验证功能(还有很多功能没有罗...

50090
来自专栏每日一篇技术文章

带你入坑02-weex-路由的使用

创建一个父组件和两个子组件 父组件foo.vue 的文件和子组件home.vue和me.vue

41110
来自专栏轻扬小栈

破狗,pogoplus 之 迅雷离线

18530

扫码关注云+社区

领取腾讯云代金券